我可以使用position：absolute？</div> </div>使<div> size包含child <div>

Question

我正在建立一个网站并遇到一些问题。

如果HTML代码如下：

<div class="parent">    
    <div class="child">
         **contents1**
    </div>

     **contents2**
</div>

和CSS样式表如：

.parent{ position: relative;}
.child{ position: absolute; top: 10px; left: 20px;}

在这种情况下，'parent'的边框不包含'child'的区域，  但只有内容的边界框2。

有办法解决吗？

我希望父项的边界框包含其子项的边界框，而不管它们的位置属性。

我可以通过 JQuery

来计算父级的大小

但我认为有一种方法可以用CSS做。

希望得到积极的回答。

谢谢！

Answer 1

position:absolute;从文档流中取出元素 - 这几乎就是属性的重点。

如果您的.child具有静态高度，则可以通过对其父级应用适当的填充来逃避：

.parent{position:relative;padding-top:60px;} /*(40+10*2)px*/
.child{position:absolute;top:10px;left:20px;height:40px;}

Fiddled

如果您仍然希望考虑.child维度，并且您可能可以使用替代方案（很难在没有更好的背景的情况下提出建议），那么绝对定位可能会被滥用。

我通常建议你不要使用anonymous blocks。