作者:
WangMin
格言:努力做好自己喜欢的每一件事
在讲几种定位方式之前，我们先来了解一下什么是普通流(normal flow)？
除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。
position 属性的作用
position 用于定位盒子对象，有时一个布局中几个小对象，不易用css padding、css 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）。
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，才能使子元素出现在父元素的正确位置。
position：fixed
fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。 常用于创建在滚动屏幕时仍固定在相同位置的元素。如果想要某个元素固定在页面的某个位置不动的话，就个这个元素设置 position：fixed，并通过 top 或 bottom 和 left 或right 调整位置就能实现固定元素的效果。
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 这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作 sticky 的生效前提。
它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与 sticky 元素的距离达到生效前提，relative 定位自动切换为 fixed 定位；等到父元素完全脱离视口时（即完全不可见），fixed 定位自动切换回relative 定位。
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推荐的标准。具体情况可以如下图：
以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!!