目录
定位（position）
定位是一种更加高级的布局手段
通过定位可以将元素摆放到页面的任意位置
使用position属性来设置定位
可选值 含义
static 不开启定位，元素是静止的，默认值
relative 开启元素的绝对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
1. 相对定位
当元素的position属性值设置为relative时，则开启了元素的相对定位
偏移量（offset）
当元素开启相对定位以后，可以通过偏移量来设置元素的位置
offset属性 含义
top 定位元素和定位位置的上边距离
bottom 定位元素和定位位置的下边距离
left 定位元素和定位位置的左侧距离
right 定位元素和定位位置的右侧距离
定位元素垂直方向的位置由top和bottom两个属性控制，通常情况下只会使用其中之一
top值越大，定位元素越靠下
bottom值越大，定位元素靠上
定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用其中之一
left越大，定位元素越靠右
right越大，定位元素越靠左
ok，介绍完相对布局，我们的需求是不是变得so easy！
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style type="text/css">
.box1{
width:200px;
height:200px;
background-color:red;
}
.box2{
width:200px;
height:200px;
background-color:orange;
position:relative;
left:200px;
bottom:100px;
}
.box3{
width:200px;
height:200px;
background-color:green;
}
</style>
<body>
<div id="" class="box1">
1
</div>
<div id="" class="box2">
2
</div>
<div id="" class="box3">
3
</div>
</body>
</html>
可以看出，使用了相对定位后，只会移动自身的布局位置，而不会对已存在的其他元素产生任何影响
现在我们所举的例子不是很明显，但当页面布局比较复杂，特别是页面元素很多的时候，其优越性就可以大大体现出来
相对定位的特点
当元素开启相对定位以后，如果不设置偏移量元素，则元素不会发生任何变化（这里注意，不仅仅是位置）
相对定位是参照于元素在文档流中的位置进行定位的（可以理解为相对于自身原始位置）
相对定位会提升元素的层级（表现为可以覆盖其他元素）
相对定位不会改变元素的性质：块还是块，行内还是行内
相对定位的第三个特点相对定位会提升元素的层级，是不是就类似于浮动一样脱离了文档流？
A：我们可以对比下，浮动和相对定位的区别
参考系不同：浮动的参考系是其父元素；相对定位是相对于自身
可移动方向不同：浮动只能左右移动；相对定位是上下左右移动
影响不同：浮动会影响页面布局（包括下方元素位置影响和高度塌陷问题）；相对定位不对影响页面布局
性质不同：浮动会改变元素的性质（不再独占一行，其宽高都会被内容撑开）；相对定位不会改变元素的性质
文字环绕：浮动不会覆盖文字；相对定位可以覆盖文字（这个可以自行验证，不再赘述）
当然，浮动和相对定位也有其相似之处
浮动和相对定位都是移动位置（貌似是废话）
浮动和相对定位不会从父元素中移出
可以看出，浮动和相对定位的区别是更多的
最后回答一点：浮动脱离了文档流，不再占据页面位置；相对定位仍然占据页面位置（所以怎么能够叫 脱离文档流 呢？）
相对定位的第四个特点相对定位不会改变元素的性质：块还是块，行内还是行内，但是上述例子中元素开启相对定位后好像就不再独占一行了，这个怎么理解？
A：相比于浮动元素的特点，相对定位不会改变元素的性质其实是一个相对不容易理解的问题。但其实也不难，可以把相对定位认为是元素的灵魂出窍。其位置发生改变以后，布局并没有产生影响，因为它的肉体（结构）仍然占据着原来的那个位置。只是其灵魂（内容）发生了移动。
相对定位的第四个特点中块还是块，行内还是行内，意味着行内元素也可以使用相对定位是吗？
2. 绝对定位
当元素的position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位的特点
开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
开启绝对定位后，元素会从文档流中脱离
绝对定位会改变元素的性质：行内变成块，块的宽高被内容撑开（与相对定位相反）
绝对定位会使元素提升一个层级
绝对定位元素是相对于其包含块进行定位的（与相对定位不同）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.box1{
width:500px;
height:500px;
background-color:red;
position:relative;
}
.box2{
width:100px;
height:100px;
background-color:green;
}
.box3{
width:200px;
height:200px;
background-color:orange;
/*position:relative;
top:-200px;*/
}
.box4{
width:400px;
height:400px;
background-color:#3300ff;
margin-top:30px;
/*position:relative;*/
}
.box5{
width:200px;
height:200px;
background-color:#993366;
position:absolute;
top:30px;
left:30px;
}
</style>
</head>
<body>
<div class="box3">
33
</div>
<div class="box1">
111
<div class="box4">
444
<div class="box5">
555
</div>
</div>
</div>
</body>
</html>3. 固定定位的特点
固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
唯一不同的是，固定定位永远参照于浏览器的视口（viewport，可视窗口）进行定位，不会随网页的滚动条滚动
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.box1{
width:500px;
height:500px;
background-color:red;
position:relative;
}
.box2{
width:100px;
height:100px;
background-color:green;
}
.box3{
width:200px;
height:200px;
background-color:orange;
/*position:relative;
top:-200px;*/
}
.box4{
width:400px;
height:400px;
background-color:#3300ff;
margin-top:30px;
/*position:relative;*/
}
.box5{
width:200px;
height:200px;
background-color:#993366;
position:fixed;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div class="box3">
33
</div>
<div class="box1">
1111
<div class="box4">
444
<div class="box5">
555
</div>
</div>
</div>
</body>
</html>缩小浏览器的窗口出现滑块，box5并没有因为滚动而发生位置的变化，这也验证了上述知识，同时也应该明白了视口的概念
4. 粘滞定位
将元素的position属性设置为sticky，则开启了元素的固定定位
这次，我们换个方式，直接来看粘滞定位的效果
该元素是根据文档流进行定位的，即相对于包含块进行偏移
偏移量不会影响任何其他元素的位置
粘性元素总是“粘”到其最近的具有“滚动机制”的祖先元素（当overflow为hidden、scroll、auto、overlay时创建），即使该祖先不是最近的实际滚动祖先
这里可能最后一点比较难理解，别着急，我们接着往下看
几种定位的对比
我们通过上面的学习，知道position属性有五个可选值
但static是默认值，即不开启定位，所以我们只需要对比4种定位方式即可
定位方式 是否不设置偏移量，元素不会发生改变 是否脱离文档流 是否改变元素性质 是否提升元素层级 参考系
relative（相对定位） √ × × √ 参照于元素在文档流中的位置
absolute（绝对定位） × √ √ √ 参照于其包含块
fixed（固定定位） × √ √ √ 参照于浏览器的视口
sticky（粘滞定位） × √ √ √ 参照于浏览器的视口
5. 补充：元素层级
对于开启了定位元素，可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示- 如果元素的层级一样，则优先显示靠下的元素
- 祖先的元素的层级再高，也不会盖住后代元素
