为什么在没有必要的情况下设置相对位置

Question

我看到很多网站position: relative;在不使用内部元素中的位置时设置了块内元素。还有其他原因要设置相对位置吗？

例子：

<div class="parent">
  <div class="parent__container">
    other elements here.
  </div>
</div>

.parent {
  background-color: blue;
}

.parent__container {
  position: relative;
  // etc
}

并且内部元素没有使用任何位置，有时我什至看到带有position: relative;set 的 .parent 。

这是非常非常常见的，我可以指出几个正在设置位置的网站，而没有任何必要（至少我认为）。

谢谢。

Answer 1

将元素设置为的基本上有 3 个原因position: relative

1. 重新定位元素本身，即top: 20px

2. 用于z-index该元素。副作用是，如果不设置 a z-index，它仍然会将自己定位在静态定位元素的顶部。

3. 限制绝对定位子元素的范围，因此相对定位元素的子元素可以绝对定位在该块内。

这是一篇旧文章，描述了最常用的位置值之间的差异：

• https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/