多航班号轮播时time元素不显示问题求助

编写了用于在航班号旁显示时间的代码，但当存在多个需要轮播切换的航班号时，独立的时间元素不再显示，以下是问题代码、正常代码及样式，以及对应的解决方法：

时间不显示的代码示例 #

<div id='fltsmain' class='cell  flts' style='top:0px;position:absolute;'>
    <div class='cell' style='top:0px;position:absolute;'>
        <div id='flts1' class='cell flts fader1'>LM234</div>
    </div>
    <div class='cell' style='top:0px;position:absolute;'>
        <div id='flts0' class='cell flts fader0'>FR1234</div>
    </div>
</div>

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

时间正常显示的代码示例 #

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


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

关联样式代码 #

.cell{
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    height: 100px;
    max-height: 100px;
    font-size: 50px;
    font-weight: normal;
    font-style: normal;
}

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

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

问题原因与解决方法 #

核心原因 #

table-cell 元素必须依赖父级的 table 或 inline-table 容器才能正常渲染。当给 #fltsmain 添加 position:absolute 后，它脱离了正常文档流，后续的 .time 元素（同样是 table-cell）因为没有有效的表格容器，无法被正确渲染显示。同时，多层嵌套 table-cell 元素也会触发浏览器的布局异常。

修复方案 #

1. 给时间元素添加绝对定位：修改 .time 的样式，让它脱离文档流并固定位置，确保不受其他元素布局影响：

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

2. 修正嵌套的table-cell结构：移除 #fltsmain 上的 cell 类，或者将其 display 属性改为 block，避免多层表格元素冲突：

#fltsmain{
    display: block;
}

3. 可选：改用flex布局：如果不需要绝对定位，也可以将父容器改为 display:flex，直接实现横向排列，避免table-cell的布局限制。

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