作者:
WangMin
格言:努力做好自己喜欢的每一件事
在讲几种定位方式之前，我们先来了解一下什么是普通文档流(normal flow)？
前面讲过浮动会让元素脱离文档流，如果不设置浮动所有元素都处于普通文档流中。普通文档流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到；行内元素在一行中水平排列。
position 属性的作用
position 用于定位盒子对象，有时一个布局中的某些元素，不易用css 中的 padding、 margin 进行位置排列，这个时候我们就可以使用 position 定位来设置。特别是一个盒子里几个小盒子不规律的布局，这个时候我们使用 position 定位非常方便布局元素。
position 属性用来指定一个元素在网页上的位置，一共有5种定位方式，也就是说 position 属性主要有五个属性值。如下：
| 属性值 | 含义 |
|---|---|
| static | 默认值 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 粘性定位 |
元素可以使用的顶部（top），底部 (bottom)，左侧 (left)，右侧 (right)及 z-index 属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
position:static
static 是 position 属性的默认值。如果省略 position属性，浏览器就认为该元素是 static定位。
这时，浏览器会按照代码的顺序，决定每个元素的位置，这称为"正常的文档流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。
注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right、 z-index这五个属性无效。
position:relative
相对定位的偏移参考元素是元素本身原来的位置，不会使元素脱离文档流。设置了相对定位的元素不管它是否进行移动，元素仍然占据它原来的位置。移动元素会导致它覆盖其他的元素。相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级。它必须搭配top、bottom、left、right这四个属性使用，用来设置偏移的方向和距离。例子如下：
没有使用position:relative时:
<div class="box">
<div class="same one"></div>
</div>
.box{
width:200px;
border:1px solid #ccc;
}
.box>.same{
width:200px;
height:200px;
line-height: 50px;
text-align: center;
color: azure;
margin-bottom: 20px;
}
.box>.one{
background:#CCCCCC;
}
使用position:relative时:
.box>.one{
background:#CCCCCC;
position: relative;
top: 10px;
left:10px;
}
我们使用了 top:10px 和 left:10px 将 one元素进行了调整，通过上图就会发现这两个10px并不属于盒子模型，他只是用定位将 one元素进行了位置调整。上面代码中，div元素从默认位置向下偏移10px（即距离顶部10px），向右偏移10排序（即距离左边10px)。
相对定位的特点
1、不会脱离文档流，元素位置的变化，不会对任何元素产生影响。
2、定位元素的层级比普通元素要高，无论什么定位，显示的层级关系都是一样的。
层级关系默认规则：定位元素会覆盖在普通元素的上面；都设置定位的两个元素，后写的元素会覆盖在先写的元素上面。
3、left 和 right 不能一起设置，top 和 bottom 不能一起设置。
4、相对定位的元素，也能继续浮动，但不推荐相对定位和浮动一起使用。
5、相对定位的元素，也能设置margin调整元素位置，但不推荐相对定位和margin一起使用。
position:absolute
它有一个重要的限制条件：相对于已定位的最近的父元素，如果没有设置 相对定位的的父元素，那么它的位置就相对于最初的包含元素（比如body）。另外，absolute定位也必须搭配top、bottom、left、right这四个属性使用。
绝对定位的元素会脱离普通流，其实它的效果跟浮动是同样的，都会飘起来覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些元素的排列顺序。
<div class="box">
<div class="same one"></div>
<div class="same two"></div>
<div class="same three"></div>
</div>
.box{
width:200px;
border:1px solid #ccc;
}
.box>.same{
width:200px;
height:200px;
line-height: 50px;
text-align: center;
color: azure;
margin-bottom: 20px;
}
.box>.one{
background:#CCCCCC;
}
.box>.two{
background:pink;
}
.box>.three{
background:burlywood;
}
正常文档流显示的效果：
未给父级元素 .box 添加相对定位，给 .two 元素设置绝对定位例子如下：
.box>.two{
background:pink;
position: absolute;
top:20px;
left:20px;
}
以上例子可以看出由于未给父级元素 .box 添加相对定位，给 .two 元素设置绝对定位，使的 .two 脱离了普通流，原来的位置没有保留，而且将 .one 覆盖，并对文档的根元素进行了绝对定位，定位于距离文档根元素顶部20px，左侧20px的位置。
给父级元素 .box 添加相对定位，然后再给 .two 元素设置绝对定位例子如下：
.box{
width:200px;
border:1px solid #ccc;
position: relative;
}
.box>.two{
background:pink;
position: absolute;
top:20px;
left:20px;
}
以上例子可以看出 .two 元素相对于父元素 .box 进行了绝对定位，使的 .two 脱离了普通流，原来的位置没有保留，还将 .one 覆盖，并且 .two 元素定位于距离父元素 .box 顶部20px，左侧20px的位置。
从以上例子中可以得出一个结论，如果想要子元素定位于父元素的某个位置，必须给父元素设置一个相对定位 position:relative，才能使子元素出现在父元素的正确位置。
绝对定位的特点
1、绝对定位的元素会脱离文档流，会对后面的兄弟元素和父元素有影响。
2、跟相对定位是一样的，left和right不能一起设置，top和bottom不能一起设置。
3、绝对定位和浮动不能一起设置，如果一起设置的话，浮动会失效，以定位为主。
4、绝对定位的元素可以通过margin来调整位置，但并不推荐一起使用。
position：fixed
fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位参照的是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。 常用于我们在滚动屏幕时仍然需要固定在相同位置的元素。如果想要某个元素固定在页面的某个位置不动的话，就给这个元素设置 position：fixed，并通过 top 或 bottom 和 left 或right 调整位置就能实现固定元素的效果。
<style>
body{
height: 1500px;
}
.box{
width: 200px;
height: 200px;
color:#fff;
border:1px solid #000;
}
.box1{
background:#350;
}
.box2{
background:#330;
position: fixed;
top:100px;
left:100px;
}
.box3{
background:#390;
}
</style>
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
效果如下：
不管滚动条如何滚动，box2定在所给定的那个位置没有移动。
固定定位的特点其实跟绝对定位的特点是一样的。
position：sticky
sticky 跟前面四个属性值都不一样，它会产生动态效果，很像 relative 和fixed 的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。
因此，它能够形成"动态固定"的效果。例子如下，初始加载时在自己的默认位置（relative定位）。
<div class="box box11">111111</div>
<div class="box box1 active">222222</div>
<div class="box box2">333333</div>
<div class="box box3">444444</div>
<div class="box box4">555555</div>
<div class="box box5">666666</div>
.box{
width:50%;
height:400px;
color:#fff;
margin-bottom: 20px;
}
.box11{
background:#f00;
}
.box1{
background:#000;
}
.box2{
background:palegoldenrod;
}
.box3{
background:peru;
}
.box4{
background:blueviolet;
}
.box5{
background:burlywood;
}
.active{
position:sticky;
top:0px;
}
页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。
等到页面重新向上滚动回到原位，工具栏也会回到默认位置。
sticky 生效的前提是，必须搭配top、bottom、left、right 这四个属性一起使用，不能省略，否则不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作 sticky 的生效前提。
它的具体规则是，当页面滚动的距离大于设置的偏移值时，设置粘性定位的元素将固定在容器内的指定位置；当页面滚动的距离小于设置的偏移值时，设置粘性定位的元素将自动切换到最初的位置。
sticky属性有以下几个特点：
1、该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
2、当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。即如果你设置了top: 20px，那么在sticky元素到达距离相对定位的元素顶部20px的位置时固定，不再向上移动。
3、元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于浏览器窗口来计算元素的偏移量。
position：sticky使用条件：
1. 父元素不能设置 overflow:hidden; 或者 overflow:auto; 属性；
2. 必须制定 top、bottom 、left 、 right 4个值之一，否则只会处于相对定位；
3. 父元素的高度不能低于sticky 元素的高度；
4. sticky 元素仅在其父元素内生效；
position：sticky 这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。具体情况可以如下图：
以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! :smile: 后续继续更新!!
