开发者学堂课程【前端开发CSS基础：CSS position 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4265
CSS position
内容介绍：
一、 定位简介
二、CSS position 属性：
三、 偏移量设置
一、定位简介
1、CSS 定位：
改变元素在页面上的位置
2、CSS 定位机制：
普通流：元素按照其在 HTML 中的位置顺序决定排布的过程
浮动
绝对布局
3. css 定位属性：
属性 |
描述 |
position |
把元素放在一个静态的、相对的、绝对的、或固定的位置中 |
top |
元素向上的偏移量 |
left |
元素向左的偏移量 |
right |
元素向右的偏移量 |
bottom |
元素向下的偏移量 |
z-index |
设置元素的堆叠顺序 |
二、CSS position 属性：
1.static：对象遵循常规流。此时4个定位偏移属性不会被应用。
2. relative：对象遵循常规流，并且参照自身在常规流中的位置通过 top，right，bottom，left 这４个定位偏移属性进行偏移时不会影响常规流中的任何元素
3. absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到 body 元素。盒子的偏移位置不影响常规流中的任何元素，其 margin 不与其他任何 margin 折叠。
4. fixed：与 absolute 一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
（1）创建一个新的HTML文件命名为 position
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.one{
width:100px;
height:100px;
background -color: aquamarine ;
}
</style>
</head>
<body>
运行结果如下：
可以看到出现了一个 div 和许多掉语句，并且还出现了滚动条，浏览器是默认有一定边距的。
（2）为了解决边距的问题则需要对代码进行修改:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margine：0；
}
在刷新页面可以得到:
观察到边距已经消失了
（3）加入 position
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>I
<style>
.one{
width:100px;
height:100px;
运行效果如下：
此时观察到 div 脱离文档流，把文档覆盖了，此时不占位，同时在滑动滚动条，就会发现页面是固定的
（4）想让文字在 div 上面
z-index ，默认值是 0，值越大，越在上面
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>I
<style>
运行效果如下：
观察到文字在 div 上方
如果想将效果改成滑动滚动条但页面不动，就需要修改代码；
将 position:absolute;改为 position：fixed；
运行效果如下;
这种结果下文字进行了滚动但 div 没有发生变化
将 position: fixed；改为 position：relative;
此时，可以看到 div 脱离了文档流，他是占位的
三、偏移量设置
top、left、right、bottom 四种偏移量都可以进行设置
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>I
<style>
.one{
width:100px;
height:100px;
background -color: aquamarine ;
代码运行效果：
可以看到这个 div 距上有 100，距左也有 100
再将代码中的 position 的 relative 改为 absolute
又会得到以下效果：
此时依旧看到这个 div 距上有100，距左也有100。但是这个div是脱离文档流的。
四、 relative 与 absolute 的搭配使用
（1）
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<div class="container">
<div class=”in”>
我是内部 div
</div>
</div>
</body>
</html>
运行效果如下：
此时，可以看到底层是一个500*500的 div，上层是一个100*100的 div。
（2）代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>I
<div class="container">
<div class=”in”>
我是内部 div
</div>
</div>
</body>
</html>
运行效果如下：
可以看到上面有 300px 的距离；
（3）
代码演示：
*{
padding：0；
margin：0；
}
.container{
width:500px;
height:500px;
background -color: aquamarine ;
margin-top：300px；
<body>
运行效果如下：
可以看到内层 div 距离整个上方是有 100px 距离
（4）想让内层 div 在外层 div 的上方有距离
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>I
<style>
运行效果如下：
absolute 与 relative 搭配使用可以改变参考对象，在上述例子中参考对象变成了外部 div
