2013-02-17 29 views
1

我們正在構建一個包含多個用戶可以與之交互的單個頁面的Web應用程序。 我目前需要構建應用程序的主要佈局,該應用程序應該將頁面分成不同的部分。 我無法控制將添加到每個部分的內容。絕對定位的div如何影響其子女?

每個部分應該可以被用戶放大和推動其它部分出來的觀看區域。因此,我正在考慮爲每個部分使用絕對定位,以便正確定位它們並允許輕鬆更改視圖上的位置。

的理想的情況是,如果他是他自己的頁面上發展有人可以開發每個部分的內部內容。所以我的擔心是 - 絕對定位父母div如何影響將被添加的子元素?

+0

您是否想出了一個解決方案?如果你有問題,請發帖。 – fredsbend 2013-02-21 08:33:02

回答

0

發佈此信息以跟進調查結果。

的主要問題是定位的元素作爲非靜態確實有直接上被定位爲絕對的任何兒童的影響。

這是因爲父元素將成爲這些兒童的包含塊,而不是它是靜態的。在後一種情況下,包含兒童的區塊將是第一個擁有非靜態位置的祖先。見Absolute positioning & Definition of containing block(感謝@愛德華洛佩茲)。正因爲如此,兒童元素的任何定位都與絕對父母有關。

此外,如@fredsbend描述的,絕對定位的div元件將根據其包含的元素的寬度不根據其容器中,這將是一個靜態定位的div的情況下擴大。如果他們沒有明確的寬度設置,這也會影響孩子。

2

我認爲屬性position: absolute|relative|...在這裏表示如何描述元素相對於其父母/祖先行爲,而不是它的孩子將如何表現。

如果您在每個部分上使用絕對定位,它們將全部超出正常流量。這意味着你將不得不重新創建-normal-flow-mechanism。我建議您閱讀Comparison of normal flow, floats, and positioning

+0

感謝您的鏈接。我會說定位一個元素描述了它的行爲相對於它的正常流動,並不總是相對於它的父/祖先。然而,將一個元素定位爲非靜態的確會立即影響任何被定位爲絕對的子元素,因爲該元素將成爲這些子元素的包含塊。我正在尋找可能發生的其他影響。 – elanh 2013-02-17 21:38:39

1

與名稱相反,只要不指定寬度或高度,絕對定位的元素將與其中的內容展開或收縮。 http://jsfiddle.net/M3CZg/

#abs1 { 
position:absolute; 
top:0; 
} 
#abs2 { 
position:absolute; 
top:50px; 
width: 400px; 
} 

<div id="abs1"></div> 
<div id="abs2"></div> 

用任何內容填充這兩個div,它們將相應地展開。

對於你說的話與用戶操作的div,你可以使用一個最小寬度和最小高度,也最大寬度和最大高度,以保持一個範圍內的擴張。這也需要溢出:隱藏的情況下,內容大於最大屬性。 http://jsfiddle.net/M3CZg/3/玩弄,並移動窗口,看看divs如何彎曲。