英文:
Elements interfering with adjacent element causing it to be hidden
问题
这段代码中有交替显示的航班号码和对应时间，但时间元素显示位置不正确，被另一个元素遮挡而隐藏了。
看不出交替显示的元素是如何引起问题的。
<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;
}
更新：
已添加相对定位和绝对定位，但没有改变任何内容。
下面的不带交替显示的代码不影响时间节点：
<div class='cell flts' style='background-color:LightSlateGray;'>GMAJY</div>
<div class='cell time'>11:50</div>
图示当前布局的截图：
英文:
I have the below code that is displaying cross fading flight numbers and next to them, a time. Yet this time element is not displaying in the correct position, therefore being covered by a separate element and hidden.
I cannot see why the cross fading elements are causing the issue.
<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>
And the 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;
}
UPDATE:
I have added positioning of relative and absolute but this changed nothing.
The below code without crossfade does not interfere with the time node:
<div class='cell flts' style='background-color:LightSlateGray;'>GMAJY</div>
<div class='cell time'>11:50</div>
答案1
得分: 1
使用“弹性”而不是“绝对”定位在航班列上已解决了问题。代码如下：
<div id='p1r0flts' class='cell flts' style='top:0px; display: flex;'>
<div class='cell' style='top:0px; position:absolute;'>
<div id='p1r0flts1' class='cell flts xfader2_1'>
LM234
</div>
</div>
<div class='cell' style='top:0px; position:absolute;'>
<div id='p1r0flts0' class='cell flts xfader2_0'>
FR1234
</div>
</div>
</div>
<div class='cell time'>11:30</div>
英文:
Adding 'Flex' instead of 'Absolute' positioning on the flights column has solved the issue. Code as below:
<div id='p1r0flts' class='cell flts' style='top:0px;position:flex;'>
<div class='cell' style='top:0px;position:absolute;'>
<div id='p1r0flts1' class='cell flts xfader2_1'>
LM234</div>
</div>
<div class='cell' style='top:0px;position:absolute;'>
<div id='p1r0flts0' class='cell flts xfader2_0'>
FR1234</div>
</div>
</div>
<div class='cell time'>11:30</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论