首页 > 代码库 > CSS属性之relative
CSS属性之relative
0.相对定位relative特点
相对定位relative元素总是会占据位置,所占据的位置是在relative元素没有设置left/top/right/bottom属性时的位置;
相对定位relative元素在设置定位时,不会影响其他元素;
相对定位relative元素在设置定位时,是相对于自身的定位
<div class="page"> <div class="backTop">position:relative</div> <div class="normal">position:normal</div> </div>
.page { width: 600px; height: 600px; background-color: #ccc; margin: 100px auto; } .backTop { width: 300px; height: 300px; background-color: #f34; position: relative; left: 100px; top: 100px; } .normal { width: 200px; height: 200px; background-color: #3f2; }
1.relative与absolute
1.限制定位
absolute元素的定位效果会受relative的限制,当然也会受到absolute/fixed的限制
2.限制层级z-index
大家都知道relative会限制absolute元素的定位,但是知道relative还会限制absolute的层级的人,可能就不是那么多了。
3.限制absolute元素在overflow:hidden里的显示
CSS属性之relative
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。