首页 > 代码库 > CSS属性之relative

CSS属性之relative

2024-09-02 13:47:36   211人阅读

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


联系
我们