html - 是否可以在同一个 html 页面中多次使用“相对位置”？

Question

我在我的母版页上使用“相对位置”和“绝对位置”。

我有一个使用上述母版页的页面，并且我试图在此页面中再次对其他 2 个元素使用“相对位置”和“绝对位置”，但此页面中的下方元素（“绝对位置”）是不是根据他上面的元素放置的（'position relative'），而是指母版页中元素的'position relative'。

希望不是太笨拙的解释..

是否可以在同一个 HTML 页面上多次使用“相对位置”？？？如果是这样，怎么办？？

谢谢，埃夫。

score 1 · Accepted Answer

对于您的问题： 您不受要相对或绝对定位多少元素的限制。

然而，定位是相当棘手的。您的元素放错位置肯定是由 CSS 中的错误定义引起的。

我将简要解释它的工作原理：

所有元素都有标准定位static。

但是，您可以定义position:relative任意数量的元素。现在，top|left|right|bottom您可以相对于它的原始位置移动元素。（原来的空间仍然被占用！）

position:absolute也可以在任意数量的元素上定义，但是它的工作方式不同：

该元素不占用其原始位置，而是相对于第一个非静态定位的祖先元素放置。（我认为这是您提到的错误-您有一个兄弟姐妹，position:relative但是绝对定位的元素根据具有相对/静态位置的父元素进行定位）

这些只是最基本的，有关更多洞察信息，请阅读本文。

score 0 · Accepted Answer

在您添加相关代码/信息/演示之前，我无法回答为什么您的代码和布局存在问题，但是我可以向您保证，您可以在一页上拥有多个相对定位的元素，事实上 - 您可以应用和定位样式任意元素任意多次。

element { 
    position:relative; 
        }

element2 { 
    position:relative; 
        }

您只是专门为元素定义规则，没有关于可以使用任何规则的次数的规则，因为规则彼此独立。

参考

您可能应该通读此页面以了解元素定位的工作原理。

2 回答 2