html - 如何处理只包含绝对定位子元素的元素？

Question

我有一个包含 2 个绝对定位的标题和段落元素的框，我正在试验如何使文本居中，我尝试使用此 site 中的方法进行修补。 .

现在这里的问题不是关于如何定位文本的方法，因为那不是我的问题所以你不应该解决它。

我的问题是这个。

如何让父元素包含它的子元素？

由于父元素包含绝对定位的元素，这意味着子元素不在流中，因此父元素会折叠。

现在这令人震惊，因为我发现以相同方式用于 float 的包含/包装方法根本不起作用。

1. Clearfix 方法。
2. 清除div方法
3. 溢出法。

它们根本不起作用!

唯一有效的方法是“显式高度”方法，该方法效率低下、不可预测(可能会在较小的窗口上中断)并且不流畅。

这是一个简单的、固定宽度的圆 Angular 框，它是我想使用上述方法居中的“h1”和“p”元素。

示例 CSS，

body {
    margin: 8px;
    padding: 0;}

.box {
    margin: 0;
    padding: 0;
    width: 335px; 
    position: relative;
    background: #40331A url(bottom.gif) no-repeat left bottom;}

.inner {
    background: url(top.gif) no-repeat left top;}

.box h2 {
    width: 180px;
    height: 27px;
    top: 50%;}

.box p {
    width: 120px;
    height: 20px;
    top: 50%;}

.box h2, .box p {
    margin: 0;
    position: absolute;}

示例标记，

<div class="box">
 <div class="inner">
  <h2>This is a heading.</h2>
  <p>This is a paragraph.</p>
 </div>
</div>

所以我的问题。

有什么简单的方法可以让父元素包含其绝对定位的子元素吗？

Answer 1

绝对定位元素的全部要点在于，这些元素的父元素应该被布置得好像这些元素从未存在过一样。如果您希望父元素的布局考虑其子元素，请不要绝对定位它们。

由于除了 position: absolute 之外，您没有包括任何相关属性，所以这似乎完全是多余的，因为绝对定位的元素无论如何都默认为它们的静态位置。只需删除该声明即可。没有比这更简单的了。

这些方法都不起作用的原因是因为它们是为 float 设计的，而绝对定位的元素不是 float 的:

1. 你不能真正“清除”任何不是 float 的东西。
2. 同上。
3. 设置overflow 对 float 有效的原因是 float 参与 block 布局的方式的结果，这不适用于绝对定位的元素。这到底意味着什么超出了这个问题的范围，但请阅读 block 格式化上下文。