在什么情况下相对优于绝对定位（反之亦然）？

Question

我正在设计一个网站，无法确定哪种类型的定位更好，相对或绝对。我知道在过去，当我使用绝对定位并试图重新调整我的浏览器大小时，它会抛弃我放置的任何位置。但是，如果我使用相对定位并想要改变某些东西，它似乎总是抛弃页面上的其他内容。

那里的专业人士使用什么？

Answer 1

默认情况下，将所有内容保留为静态（相对）。这样可以在浏览器大小更改时稍微调整大小。当窗口大小改变时，绝对定位（相对于整个网页）往往会使网页停止正常工作。

然而，在某些情况下使用绝对位置总是有用的。但是，相对于其他元素设置绝对元素 - 永远不要使用相对于页面的绝对定位。

绝对定位让你把某些元素置于其他元素之上，例如：

<div style="position: relative; width: 100px; height: 100px">
  <img src="" width="100" height="100">
  <div style="position: absolute; left: 0; top: 0">Some text on top</div>
<div>

在上面的例子中，浏览器将绝对定位的div相对于某个东西定位。这是DOM层次结构中的第一个相对祖先。所以它看到它上方的div并将其定位在相对于该div的（0,0）处。因此，一个div放在另一个div之上，当然这个div相对于页面的其余部分放置。

通常，当绝对元素位于上方且相对于另一个元素时，它将位于顶部。如果需要调整其他元素前面的内容，可以使用z-index css属性。

Answer 2

1. 一般来说，最好的是position:static
2. 如果您希望元素相对于窗口保持在相同位置，则最好是position:fixed
3. 如果您希望元素相对于父元素保持在相同位置，则与父元素的position:absolute和position的最佳值不同于static。
4. 如果要从文档流中删除元素，最好的是position:absolute和position:fixed。
5. 如果您想向上/向下/向右/向左移动元素，但不想影响周围的元素，最好的是position:relative
6. 如果要向上/向下/向右/向左移动元素，并且想要影响周围的元素，请使用边距。
7. 如果某个元素与另一个元素重叠，并且您希望看到第一个元素，那么最好的是position:relative与z-index相结合。