常用的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);
}