一、文档流
在分析position定位之前可以先简单了解下CSS中的脱离文档流是什么意思。
文档流：可以理解为元素的一种状态，处于这种状态下的元素具有一些特性。
（更加详细的文档流讲解可到《关于CSS中的文档流》页面了解。）
口语化总结：脱离文档流，也就是将元素从普通的布局排版中拿走，不占据位置（悬空了），其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但盒子内其他的文本依然会为这个元素让出位置，环绕在周围。而对于使用position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
二、定位position
1.static 为position属性的默认值，在此则不予解释。
2.absolute相对于已经定位父级元素的绝对定位。浮出、脱离布局流，它不占据空间，就是我们所说的层。若父级都没有定位，则以html（根元素）为参照物。
3.fixed相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。不论窗口滚动与否，元素都会留在那个位置。
4.relative是相对于默认位置的相对定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流，占据空间】）
5.sicky可以看出是position:relaive和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。
注：（1）在给元素加上定位position属性后，设置left、top、right、bottom的值才会有效果。
（2）绝对定位和相对定位的区别：
a.参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；
b.绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
（3）z-index : auto / number 检索或设置对象的层叠顺序。
auto：默认值。
number:无单位的整数值（可为负数）
没有设置z-index时，最后写的对象优先显示在上层(前提是这些对象都拥有定位)，设置z-index后，数值越大，层越靠上；
三、定位position的使用案例
（1）让一个元素始终在浏览器窗口水平、垂直居中
/* 方法一 */div {width: 200px;height: 200px;background: rgb(255, 110, 110);position: fixed;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}/* 方法二 */div {width: 200px;height: 200px;background: #f00;position: fixed;left: 50%;top: 50%;margin: -100px 0 0 -100px;}
（2）吸顶效果。如网页中顶部导航栏吸顶效果
/* 顶部logo和导航区 */.top {width: 100%;height: 78px;background: #58bc58;position: sticky;top: 0;/* 设置层级，防止被其他定位元素覆盖 */z-index: 300;/* 给导航栏加上阴影，显得更加真实 */box-shadow: 0 0 15px rgb(0 0 0 / 80%);}
（3）三栏布局。可通过定位来实现页面简单的三栏布局
<!-- 这是HTML的代码！ --><div class="oa"><div class="top"></div><div class="bottom"><div class="left"></div><div class="right"></div></div></div>
* {/* 去除默认间距 */margin: 0;padding: 0;}html,body {/* 让视口的高度只取第一屏的高度，去除滚动条 */height: 100%;}.oa {height: 100%;/* 父相子绝 */position: relative;}.top{height: 80px;width: 100%;background-color: blanchedalmond;}.bottom{width: 100%;height: calc(100% - 80px);background-color: burlywood;position: absolute;left: 0;right: 0;/* 80px为减去顶栏的高度 */top: 80px;bottom: 0;height: 100%;}.bottom .left{width: 200px;height: 100%;background-color: cadetblue;}.bottom .right{height: 100%;background-color: rgb(85, 87, 196);position: absolute;/* 200px为减去左栏的宽度 */left: 200px;right: 0;bottom: 0;top: 0;}
重点：定位position，可实现很多意义重大的效果，该属性应该要尽快熟练，在这里就不一一列举案例！
关于定位position更详细的讲解可到W3C页面《CSS 布局 - position 属性》
