关闭

position个人实践理解

标签: csspositionabsoluterelativefixed
87人阅读 评论(0) 收藏 举报

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



  

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2177次
    • 积分:175
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条