如何让含绝对定位子元素的span跟随相对定位span正常排版？

完全可以实现你想要的排版效果，同时保留第二个span内部元素的淡入淡出重叠功能，具体调整方式如下：

核心思路 #

给第二个span（Span2）添加position: relative后，其内部的绝对定位子元素会以Span2为定位基准，依然能保持重叠效果；同时通过调整Span1和Span2的显示属性，让它们保持类似两个相对定位元素的排版布局。

修改后的代码示例 #

<div class='parent'>
   <span id='Span1' style='position: relative; display: inline-block; margin-right: 15px;'>Some content that is fixed</span>
   <span id='Span2' style='position: relative; display: inline-block; min-height: 1.2em;'>
       <span style='position: absolute; top: 0; left: 0; width: 100%;'>Some content that is fading in and out</span>
       <span style='position: absolute; top: 0; left: 0; width: 100%; opacity: 0;'>Alternative fading content</span>
   </span>
</div>

关键调整点 #

• 给Span2添加相对定位：position: relative让内部绝对定位元素以Span2为参照，重叠效果不受影响。
• 设置inline-block显示：让两个span并排排版，同时可以控制间距、尺寸，模拟你需要的相对定位元素排版效果。
• 处理Span2高度塌陷：因为内部绝对定位元素脱离文档流，Span2默认会失去高度，通过min-height设置最小高度，确保和Span1排版对齐；也可以根据实际内容设置固定高度。
• 内部元素尺寸适配：给绝对定位子元素设置width: 100%，让其宽度和Span2一致，避免内容错位。

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