2013-02-17 65 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如何弯曲。