一、简介
1.文档流
在介绍postion之前，有必要先了解下文档流。
简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。HTML的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline），不独占一行。
一般使用margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“距离”。
只要不是float和绝对定位方式布局的，都在文档流里面。
表现如下：
<div style="border:1px solid black">div1</div>
<div style="border:1px solid red">div2</div>
这是一张图片
<img src="test.png">
2.position属性介绍
- static，默认值。位置设置为static的元素，它始终会处于文档流给予的位置。
- inherit，规定应该从父元素继承 position 属性的值。但是任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
- fixed，生成绝对定位的元素。默认情况下，可定位于相对于浏览器窗口的指定坐标。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。不论窗口滚动与否，元素都会留在那个位置。但当祖先元素具有transform属性且不为none时，就会相对于祖先元素指定坐标，而不是浏览器窗口。
- absolute，生成绝对定位的元素，相对于距该元素最近的已定位的祖先元素进行定位。此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。
- relative，生成相对定位的元素，相对于该元素在文档中的初始位置进行定位。通过 “left”、”top”、”right” 以及 “bottom” 属性来设置此元素相对于自身位置的偏移。
不管是哪种定位，都必须有一个参照物。找对了参照物，就成功了一半。
二、相对定位
relative生成相对定位的元素，相对于其正常位置进行定位。
相对定位完成的过程如下：
- 按默认方式（static）生成一个元素(并且元素像层一样浮动了起来)。
- 相对于以前的位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定，偏移前的位置保留不动。
实例
<style type="text/css">
#box1 {
margin: 20px;
width: 200px;
height: 200px;
background-color: yellow;
}
#box2 {
margin: 20px;
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 100px;
top: 100px;
}
</style>
<div id="box1"></div>
<div id="box2"></div>其中box2中的注释代码未生效前，是按照文档流进行排序呈现。
但是，当注释代码取消注释生效后，就会相对文档流中应当呈现的位置进行移动。
所以，相对定位的参照物是它本身。
三、绝对定位
绝对定位与相对定位的一大不同之处就是，当我们把一个元素设置成绝对定位，那么这个元素将会脱离文档流，其他元素就会认为这个元素不存在于文档流中而填充它原来的位置。绝对定位元素根据它的参照物移动自己的位置，而参照物则需要根据它祖先元素的定位设置来确定。
所谓根据它祖先元素的定位设置来确定简单理解为：相对于该元素最近的已定位的祖先元素，如果没有一个祖先元素设置定位，那么参照物是body层(也就是浏览器的布局页面)。
实例
以上面的图形来展示绝对定位的特性。可以看出最里层是两个盒子，外面嵌套了两层祖先元素。
A.祖先元素没定位
在祖先元素没定位的情况下，使用absolute。
#box1 {
width: 150px;
height: 150px;
margin-left: 20px;
margin-bottom: 20px;
background-color: yellow;
position: absolute;
top: 30px;
left: 30px;
}
在这种情况下，参考物就是body。
B.祖先元素有定位
祖先元素只要设置了值不为position:static之外的值，都视为有定位，并且最近的祖先元素会被设置为绝对定位元素的参照物。
#orange {
width: 400px;
height: 400px;
background-color: orange;
position: absolute;
}
#box1 {
width: 150px;
height: 150px;
margin-left: 20px;
margin-bottom: 20px;
background-color: yellow;
position: absolute;
top: 30px;
left: 220px;
}
在这种情况下，参考物就是最近的祖先元素。
除了上述两种情况外，在用户没给absolute元素设置left/right、top/bottom的情况下，所对应的参考物会有变化。
四、子绝父相对
五、固定定位
六、粘性定位
粘性定位表示将一个设置为粘性定位的结构滚动到某个地方的时候，不再发生动弹
介绍
position: sticky;粘性定位，基于用户的滚动位置来定位。
原理：
设为粘性定位的元素，依赖用户的滚动，在positon: relative;与position: fixed定位之间切换。
它的行为就像positon: relative;；
而当页面滚动超出目标区域时，就会表现为position: fixed，固定在目标位置。
这里的目标区域是指，元素相对于其父元素，会有一个特定阈值，阈值通过指定top、right、bottom或left确定，
同时，只有指定四个阈值其中一个（或多个）时，sticky属性才会生效。
语法
div .sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}