为何全部子元素设为absolute定位后会移出父容器？

问题场景 #

我有一个position: absolute的父元素，包含三个子元素：

• 仅第一个子元素设为absolute时，第二个子元素上移并处于第一个子元素后方，表现符合预期；
• 前两个子元素设为absolute时，第三个子元素上移并处于前两个子元素后方，表现也符合预期；
• 但当所有子元素都设为absolute时，子元素看起来完全移出了父容器。

原因分析 #

父元素的尺寸默认由正常文档流中的子元素撑开。当所有子元素都设置为absolute后，这些子元素会脱离正常文档流，不再参与父元素的尺寸计算。此时父元素没有任何能撑开它的内容，宽高会被压缩为0px × 0px——并不是子元素移出了父容器，而是父容器缩成了一个不可见的点，子元素仍相对于这个点定位，所以视觉上看起来“跑出去”了。

之前的场景中，只要有子元素未设置absolute，它就会留在正常流里，维持父元素的尺寸，所以其他绝对定位的子元素看起来在父容器范围内。

修复方法 #

方法1：给父元素显式设置宽高 #

直接为父元素指定固定宽高，匹配子元素的尺寸需求。比如你的子元素都是10px × 10px，可以这样修改父元素样式：

.parent {
    position: absolute;
    top: 30px;
    right: 30px;
    border: 1px solid blue;
    width: 10px;
    height: 10px;
}

这样父元素有了明确的尺寸，子元素会相对于父容器正常定位。

方法2：利用伪元素撑开父容器 #

如果不想写死宽高，可以给父元素添加一个伪元素，让它留在正常流里撑开容器：

.parent::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
}

这个伪元素属于正常文档流，能维持父元素的尺寸，同时不影响绝对定位子元素的布局。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        html,
        body {
            height: 100%;
            width: 100%;
        }
        .parent {
            position: absolute;
            top: 30px;
            right: 30px;
            border: 1px solid blue;
            width: 10px;
            height: 10px;
        }
        .child.line1 {
            position: absolute;
            height: 10px;
            width: 10px;
            background-color: red;
        }
        .child.line2 {
            position: absolute;
            height: 10px;
            width: 10px;
            background-color: lightblue;
        }
        .child.line3 {
            position: absolute;
            height: 10px;
            width: 10px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div style="height: 100%; display: flex; align-items: center; justify-content: center;">
        <div style="position: fixed; height: 200px; width: 200px; background-color: bisque;">
            <div class="parent">
                <div class="child line1"></div>
                <div class="child line2"></div>
                <div class="child line3"></div>
            </div>
        </div>
    </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Deepak