交叉淡入淡出航班号元素遮挡时间元素问题求助

我实现了航班号的交叉淡入淡出展示功能，但旁边的时间元素位置异常，被其他元素遮挡隐藏，搞不懂为什么交叉淡入元素会引发这个问题。

相关HTML代码 #

<div id='p1r0' class='cell sdrow' style='top:3px;'>

    <div class='cell sp2'> </div>

    <div id='p1r0flts' class='cell  flts' style='top:0px;position:absolute;'>
        <div class='cell' style='top:0px;position:absolute;'>
            <div id='p1r0flts1' class='cell flts xfader_1'>LM234</div>
        </div>
        <div class='cell' style='top:0px;position:absolute;'>
            <div id='p1r0flts0' class='cell flts xfader_0'>FR1234</div>
        </div>
    </div>

    <div class='cell time'>11:30</div>

相关CSS代码 #

.flts{
    left: 238px;
    width: 250px;
    color: White;
    text-align: left;
    background-color: SkyBlue;
}

.time{
    left: 488px;
    width: 200px;
    color: White;
    text-align: center;
}

.sdrow{
    position: absolute;
    left: 0px;
    width: 1920px;
    max-height: 100px;

}

更新说明 #

我尝试添加了relative和absolute定位，但问题依旧。没有交叉淡入效果的代码不会干扰时间元素：

<div class='cell flts' style='background-color:LightSlateGray;'>GMAJY</div>


<div class='cell time'>11:50</div>

当前布局截图：

问题根源 #

你给航班号容器#p1r0flts加了position:absolute，导致它脱离正常文档流，原本占据的空间不再被保留。同时它自身还继承了.flts类的样式，和内部子元素的定位、尺寸叠加，既造成样式冗余，又因为绝对定位元素默认覆盖正常流元素的特性，直接挡住了后面的时间元素；另外父容器.sdrow的max-height限制加上绝对定位元素脱离流，可能导致容器高度塌陷，进一步打乱时间元素的布局。

修复步骤 #

1. 调整航班号容器的定位与样式

   • 去掉#p1r0flts的.flts类，避免样式冲突；
   • 给#p1r0flts设置position:relative（作为内部绝对定位元素的参照容器），同时手动设置left:238px、width:250px，保持原有位置和尺寸，这样它会留在文档流中，不会让父容器高度塌陷，也不会遮挡后面的时间元素。

   修改后的HTML片段：

   <div id='p1r0flts' class='cell' style='top:0px;position:relative;left:238px;width:250px;'>
       <div class='cell' style='top:0px;position:absolute;'>
           <div id='p1r0flts1' class='cell flts xfader_1'>LM234</div>
       </div>
       <div class='cell' style='top:0px;position:absolute;'>
           <div id='p1r0flts0' class='cell flts xfader_0'>FR1234</div>
       </div>
   </div>
   

2. 确保时间元素的层级优先级
   如果仍存在遮挡问题，给.time元素添加相对定位和层级值，让它处于更高层级：

   .time{
       left: 488px;
       width: 200px;
       color: White;
       text-align: center;
       position: relative;
       z-index: 1;
   }
   

3. 优化父容器高度设置
   把.sdrow的max-height改为固定高度，确保内部元素能被完全容纳：

   .sdrow{
       position: absolute;
       left: 0px;
       width: 1920px;
       height: 100px; /* 根据实际需求调整高度 */
   }
   

核心原理 #

绝对定位元素会脱离文档流，不再占据空间且默认覆盖正常流元素。通过将外层航班号容器改为相对定位，既保证内部交叉淡入元素有定位参照，又让容器留在文档流中，维持原有布局空间，避免对时间元素造成干扰。

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