定位布局主要涉及position left right top bottom几个属性，只有设置了position属性，left top right bottom才起作用，且根据position值的不同，其工作方式也不同。
position:static(静态定位) relative（相对定位） fixed（固定定位） absolute（绝对定位） sticky（粘连定位）, 默认值static.
top bottom right left 一般用其中两个即可实现定位，这四个值的参数对象是浏览器的四条边（相对浏览器的位置）。
1、static
静态定位的元素不受left top bottom right 属性影响，始终根据页面正常流进行定位。
2、fixed
固定定位是指固定的元素不会随着滚动条的拖动而改变位置，最常用于实现返回顶部功能。
image.png
<style>
.div_fixed {
position: fixed;
left: 500px;
top: 300px;
width: 300px;
height: 300px;
background-color: yellow;
border: 1px solid black;
}
.div_static {
position: static;
width: 300px;
height: 700px;
background-color: blue;
border: 1px solid red;
}
</style>
<body>
<div id="demo">
<div class="div_static">
div_static
</div>
<div class="div_fixed">
div_fixed
</div>
</div>
</body>
3、relative
相对定位是指该元素的位置相对于他的原始位置计算而来的，需结合top bottom left right属性设定相对原始的位置。一般固定定位元素的位置是相对于浏览器而言，相对定位元素的位置是相对于原始位置而言。就是元素还在文档流中像static一样占着位置，但视觉上会有偏移，多用于absolute绝对定位的父元素。
静态定位.png
相对定位.png
绝对定位.png
<style>
#demo div {
width: 100px;
height: 60px;
margin: 10px;
background-color: blue;
color: black;
border: 1px solid yellow;
position: static;
}
.class2 {
position: relative !important;
left: 30px;
top: 30px
}
</style>
<div id="demo">
<div class="class1">
无相对定位div
</div>
<div class="class2">
相对定位div
</div>
<div class="class3">
无相对定位div
</div>
</div>
4、absolute
绝对定位元素会脱离文档流，其前面或后面的元素会认为这个元素不存在，相对于最近的进行过定位的（非static）父级元素定位，若没有父级元素进行过定位，则相对于即浏览器窗口定位。
继续应用上面相对定位的例子，只修改.class2,其余不变，效果如相对定位图。
.class2 {
position: absolute !important;
left: 30px;
top: 30px
}
