position个人实践理解

常用的position属性使用：

position:absolute/relative/fixed,默认状态下是static。

position:absolute 如果是单独存在，父级没有进行定位的话，它就是相对于boby可以放置页面上任何位置。元素处于浮动状态，不影响别的元素。

position:relative  如果给元素加上这个属性的话，表示元素相对与原来本身位置布局。

比如说left：20px；top:10px.意思就是说在原来的位置上右移动20px，下移动10px。

用的比较多的就是position:absolute/relative联合使用。一般是给父元素加上position:relative，子元素加上position:absolute，这时这个子元素就不是相对于boby了，就是相对于父元素了。

<div style="position:relative">

<divstyle="position:absolute;left：20px;top:10px">aaaaaaaaaaaaaa</div>

</div>

position:fixed俩个作用

1:用于固定元素，它是相对于浏览器窗口定位，它不会受页面其他元素影响。常用的例子就是固定页面头部，底部，然后中间内容滚动啥的都不受影响。

2:弹框时背景遮罩。如果页面超过一页的时候就一定要使用position:fixed进行布局。

.mui-popup-backdrop {
position: fixed;
z-index: 998;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.4);
}