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位置：絕對

回答

相關問題