普通文档流？浮动也会让元素脱离文档流，如果不设置浮动所有元素都处于普通文档流中。普通文档流中元素框的位置由元素在HTML中的位置决定，块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到，行内元素在一行中水平排列层级关系默认规则：定位元素会覆盖在普通元素的上面；都设置定位的两个元素，后写的元素会覆盖在先写的元素上面
static ( 默认 )
元素
按照代码的顺序，决定每个元素的位置，正常的文档流显示。不受top、right、bottom、left、z-index属性的影响
html
<style>
.one{ width: 270px; height: 270px; border: 1px solid red;margin-left: 50px; }
.two,.three{ width: 100px; height: 100px; }
.two{ background-color: #145eff; }
.three{ background-color: #ffec00; }
</style>
<div class="one">
<div class="two">正常盒子</div>
<div class="three">正常盒子</div>
</div>效果:
relative ( 相对定位 )
元素的
偏移是参考元素本身原来的位置，不会使元素脱离文档流。设置了相对定位的元素不管它是否进行移动，元素原本所占空间保留，移动元素会导致它覆盖其它的元素。并且定位元素经常与z-index属性进行层次分级。可通过left，right，bottom，top改变元素的位置
html
<style>
.one{ width: 270px; height: 270px; border: 1px solid red;margin-left: 50px; }
.two,.three{ width: 100px; height: 100px; }
.two{
background-color: #145eff;
/* 设置相对定位 */
position: relative;
top: 20px;
left: 70px;
}
.three{ background-color: #ffec00; }
</style>
<div class="one">
<div class="two">relative</div>
<div class="three">正常盒子</div>
</div>效果:
absolute ( 绝对定位 )
绝对定位（
子绝父相），元素脱离文档流，元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，那么相对于文档的body元素进行定位。可以通过设置top、right、bottom、left属性来调整元素的位置。相对于祖先元素进行偏移时，元素原本所占空间不保留。其实它的效果跟浮动是同样的，都会飘起来覆盖页面上的其它元素，可以通过设置z-index属性来控制这些元素的排列顺序。绝对定位和浮动不能一起设置，如果一起设置的话，浮动会失效，以定位为主
html
<style>
.one{
width: 270px; height: 270px; border: 1px solid red; margin-left: 50px;
/* 父元素设置相对定位 */
position: relative;
}
.two,.three{ width: 100px; height: 100px; }
.two{
background-color: #145eff;
/* 子元素设置绝对定位 */
position: absolute;
top: 50px;
left: 70px;
}
.three{ background-color: #ffec00; }
</style>
<div class="one">
<div class="two">absolute</div>
<div class="three">正常盒子</div>
</div>效果:
fixed ( 固定定位 )
使用 top，left，right，bottom 定位，
会脱离正常文档流，不受标准流的约束，并拥有层级的概念。它也是以游览器的四个边角为基准，相对于视口（浏览器窗口）进行偏移，即定位参照的是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。常用于我们在滚动屏幕时仍然需要固定在相同位置的元素
html
<style>
.one{ width: 270px; height: 270px; border: 1px solid red; margin-left: 50px; }
.two,.three{ width: 100px; height: 100px; }
body{ height: 2000px; }
.two{
background-color: #145eff;
/* 设置固定定位 */
position: fixed;
bottom: 90px;
right: 50px;
}
.three{ background-color: #ffec00; }
</style>
<div class="one">
<div class="two">fixed</div>
<div class="three">正常盒子</div>
</div>效果:
sticky ( 粘性定位 )
它会产生
动态效果，很像 relative 和fixed 的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。因此，它能够形成"动态固定"的效果，必须设置top、bottom、left、right4个值之一，否则不产生效果。元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么就相对于浏览器窗口来计算元素的偏移量。父元素不能设置 overflow:hidden 或者 overflow:auto 属性，父元素的高度不能低于 sticky元素的高度
html
<style>
.two,.three,.four,.five,.six,.seven,.eight{ width: 300px; height: 200px;margin-top: 10px; }
.two{
background-color: #145eff;
/* 设置粘性定位 */
position: sticky;
top: 0px;
}
.three{ background-color: #ffee56; }
.four{ background-color: #ff96e9; }
.five{ background-color: #9eff40; }
.six{ background-color: #62ffe7; }
.seven{ background-color: #ecff7f; }
.eight{ background-color: #b6b7b6; }
.eight{ background-color: #b6b7b6; }
</style>
<div class="seven">正常盒子</div>
<div class="eight">正常盒子</div>
<div class="two">sticky</div>
<div class="three">正常盒子</div>
<div class="four">正常盒子</div>
<div class="five">正常盒子</div>
<div class="six">正常盒子</div>效果:
