如何实现子元素重叠且父元素保留大子元素的占位空间？

我有两个带文本的元素：

child1: 'one two three four'
child2: 'one two'

需求如下：

• 让child2叠放在child1上方
• 父元素需占据与child1（尺寸更大的元素）相同的空间

目前仅实现了第一个需求，代码如下：

<!DOCTYPE html>
<html>

<head>
    <style>
        #parent {
            background-color: gray;
        }

        #child1 {
            position: fixed;
        }

        #child2 {
            position: sticky;
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <div id="parent">
            <span id="child1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam vulputate interdum non porta tortor. Quisque eu mattis dolor. Vestibulum tincidunt lobortis lobortis. Aliquam dignissim enim molestie massa facilisis sagittis. Aenean vel nibh sagittis, rhoncus tellus quis, commodo est. Cras convallis eu magna id dignissim. Quisque leo sem, suscipit vitae gravida at, dapibus et erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et tortor hendrerit, cursus risus non, viverra tellus. Aliquam laoreet erat risus, eu pulvinar tortor vulputate nec. Etiam velit ipsum, gravida eu iaculis ut, mollis vitae arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dictum consectetur neque, nec porta justo tincidunt vitae. Curabitur metus nisl, dictum ut turpis a, dignissim venenatis dolor.
            </span>
            <span id="child2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam
            </span>
        </div>
        <div id="nextElem">##############</div>
    </div>
</body>

</html>

想问：如何让父div占据与child1相同的空间？或让父元素占据容纳所有子元素所需的空间？有没有无需为父元素指定绝对尺寸的实现方法？

当前问题根源是fixed和sticky定位会让元素脱离文档流，父容器无法感知它们的尺寸。推荐用相对定位+绝对定位的组合，既实现层叠效果，又让child1自然撑大父元素：

最终实现代码 #

<!DOCTYPE html>
<html>

<head>
    <style>
        #parent {
            background-color: gray;
            position: relative; /* 为子元素绝对定位提供参考坐标系 */
        }

        #child1 {
            display: block; /* 将span转为块级元素，确保尺寸计算正确 */
            /* 不设置脱离文档流的定位，保持在正常流中撑大父元素 */
        }

        #child2 {
            position: absolute; /* 脱离文档流，实现层叠 */
            top: 0;
            left: 0;
            color: red;
            background-color: rgba(255,255,255,0.8); /* 可选：添加半透背景提升文本可读性 */
        }
    </style>
</head>

<body>
    <div>
        <div id="parent">
            <span id="child1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam vulputate interdum non porta tortor. Quisque eu mattis dolor. Vestibulum tincidunt lobortis lobortis. Aliquam dignissim enim molestie massa facilisis sagittis. Aenean vel nibh sagittis, rhoncus tellus quis, commodo est. Cras convallis eu magna id dignissim. Quisque leo sem, suscipit vitae gravida at, dapibus et erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et tortor hendrerit, cursus risus non, viverra tellus. Aliquam laoreet erat risus, eu pulvinar tortor vulputate nec. Etiam velit ipsum, gravida eu iaculis ut, mollis vitae arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dictum consectetur neque, nec porta justo tincidunt vitae. Curabitur metus nisl, dictum ut turpis a, dignissim venenatis dolor.
            </span>
            <span id="child2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam
            </span>
        </div>
        <div id="nextElem">##############</div>
    </div>
</body>

</html>

核心原理 #

• 父元素设置position: relative，让绝对定位的child2以父容器为基准定位，不会跑到页面其他位置
• child1保持正常文档流状态，它的内容尺寸会自动撑满父容器，让父元素和child1尺寸完全一致
• child2用绝对定位脱离文档流，既实现了在child1上方的层叠效果，又不会干扰父元素的尺寸计算

这个方案完全不需要指定任何绝对尺寸，完全基于元素自身内容自适应，完美匹配需求。

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