Question

我经常发现自己将一个类附加到一个元素只是为了给它position: relative;，以便我可以使用position: absolute;

来定位它的孩子

如果我写的话会有什么不妥，或者我应该说会有什么不妥：

* {
  position: relative;
}

或者可能是以下示例，因为这些通常是我需要相对定位的唯一元素：

div, navbar, footer, section, aside, header, article {
  position: relative;
}

根据W3schools，默认情况下所有元素都是position: static;，根据页面的正常流程定位。

＆＃34; HTML元素默认定位为静态。静态定位元素始终根据正常流量定位。页面＆＃34;

并且根据相同的来源，相对定位的元素也会根据页面的正常流程定位，除非被CSS覆盖：

＆＃34;相对定位元素的内容可以移动和重叠其他元素，但元素的保留空间仍然是保留在正常流程中。＆＃34;

Answer 1

是的，确实如此。如果您尝试定位一个元素absolute，则它相对于最近的祖先定位，该祖先具有除position以外的CSS static。

如果每个元素都有position:relative，那么这将是直接父元素。

但是你可能想要将绝对元素相对于DOM树中的元素进一步放置，或者可能绝对位于页面主体上。

在某些时候，您将遇到无法完全控制HTML的情况。然后你会看到，设置所有内容relative会适得其反。

示例可能是phat图层菜单。您有.menu类内的图层位于分层ul li元素的丛林深处。这应该相对于.menu元素的位置定位。您可能不想在此更改DOM树。

Answer 2

如果您将position: relative应用于页面中的所有元素，则无法有效使用position: absolute，因为您无法将元素定位到祖父母和您可能会以不可预测的方式打破依赖position: absolute的外部插件/模块。

您可能会遇到z-index的问题（例如在下拉菜单中），并且您最终会使用position: static和position: absolute覆盖此行为。

Answer 3

至于我使用位置：亲戚并不好 - 因为有时你需要在elemet相对浏览器窗口定位它会给你带来麻烦。但是，如果你确定你不会这样做，请继续

Answer 4

我们最近在我们的一个网站上看到的第一件事是，在那些相对定位的元素中的任何绝对定位的元素将使它们的位置偏离该元素。

作为一个例子，如果你试图定位到身体的中心，这将是一个问题。