CSS属性之relative

最新推荐文章于 2024-07-02 15:12:39 发布

会做饭的技术男

最新推荐文章于 2024-07-02 15:12:39 发布

阅读量629

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hjihiihka20j&title=CSS%E5%B1%9E%E6%80%A7%E4%B9%8Brelative

版权

前端专栏收录该内容

2507 篇文章 13 订阅

订阅专栏

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;
}