html - 我可以做吗
尺寸包括儿童
与位置：绝对？

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。

希望能得到肯定的答复。

谢谢！

score 2 · Accepted Answer

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

但是，如果您.child的高度是静态的，则可以通过对其父级应用适当的填充来摆脱，如下所示：

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

如果您仍想考虑.child尺寸，那么绝对定位可能已被滥用，并且您可能会选择替代方案（如果没有更好的上下文很难提出建议）

我通常建议您也不要使用匿名块。

html - 我可以做吗尺寸包括儿童与位置：绝对？