本文已参与[新人创作礼]活动，一起开启掘金创作之路。
一、文档流
在分析position定位之前可以先简单了解下CSS中的脱离文档流是什么意思。 文档流：可以理解为元素的一种状态，处于这种状态下的元素具有一些特性。
（更加详细的文档流讲解可到[《关于CSS中的文档流》](Css文档流(Normal Flow)详细介绍_菜鸟腾飞的博客-CSDN博客_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 属性》
