Question

我正在试图找出如何清除或重置页面上元素的相对位置。我有一个位置为相对的元素，并且在树的下方有一个对话框div被定义，背景图像被拉伸以填充页面以使对话框模态化。问题是b / c有一个位置：相对于DOM树的位置，当我说top：0，left：0表示背景图像时，它会变为相对于该元素的0,0而不是0页面的0。如何清除或重置相对位置，以便将绝对定位的背景图像设置为页面的0,0？

Answer 1

在大多数情况下，你的模态应该是身体的直接孩子。

如果模态具有相对或绝对定位的祖先，则无法“撤消”在更改违规元素上的样式之外。

HTML：

<html>
    <head>...</head>
    <body>
        <div id="content">content!</div>
        <div id="someModal" class="modal" style="display:none"></div>
    </body>
</html>

CSS：

.modal {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

Answer 2

我们希望首先看到您的代码，但可能您正在研究这个问题：

position: absolute !important;

Answer 3

好吧，设置为（0,0）的绝对定位元素将始终到达其最近的父元素（位置相对）的（0,0）角。这是已定义的行为，无法更改。

由于你绝对定位模态，我建议从相对定位的元素中拉出来，然后将其粘贴在（a）未定位的父元素之下，或者（b）在body标签之后。

编辑：Johnathan打败了我！

css位置：相对vs位置：绝对

3 个答案: