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

我想弄清楚如何清除或重置页面上元素的相对位置。我有一个元素的位置：相对，并进一步向下树对话框div定义与背景图像拉伸填充页面，使对话框模态。问题是b/c存在一个位置：相对于DOM树，当我说top：0，left：0代表背景图像时，它会到达该元素的0,0相对位置而不是0， 0页。如何清除或重置相对定位，以便将绝对定位的背景图像设置为页面的0,0？css位置：相对vs位置：绝对

来源

2011-02-25 Stephen

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

如果模态具有相对或绝对定位的祖先，则不能“撤销”，即不能更改有问题的元素上的样式。

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; 
}

来源

2011-02-25 19:55:41

如果我不能让模态成为身体的直接孩子（由于母版页/用户控件/等..）那么实现我需要的唯一方法是使用JavaScript从DOM中删除模态然后将其附加到身体？还是有另一种方式？使用JS将模态移动到身体的 – Stephen 2011-02-25 20:07:41

是一个完全合理的解决方案，是的。 – 2011-02-25 20:51:51

从DOM中删除模式并将其附加到身体已完美运行。谢谢！ – Stephen 2011-02-28 17:11:31

我们希望能先看到你的代码，但可能你正在寻找这n要：

position: absolute !important;

来源

2011-02-25 19:54:28 user194076

嗯，这被设置为（0,0），绝对定位的元素将永远得的（0,0）的角落最接近的父元素，它是位置相对的。这是定义的行为，不能改变。因为你绝对定位模态，我建议从相对定位的元素中拉出，并将其粘贴在（a）未定位的父元素下，或者（b）紧贴在正文标签后面。

编辑：约翰森击败了我！

来源

2011-02-25 19:59:38 Graham

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

回答

相关问题