导致相邻元素被隐藏的元素干扰

huangapple
go评论87阅读模式
英文:

Elements interfering with adjacent element causing it to be hidden

问题

这段代码中有交替显示的航班号码和对应时间，但时间元素显示位置不正确，被另一个元素遮挡而隐藏了。
看不出交替显示的元素是如何引起问题的。

  1.     <div id='p1r0' class='cell sdrow' style='top:3px;'>
  2.     
  3.         <div class='cell sp2'> </div>
  4.     
  5.         <div id='p1r0flts' class='cell  flts' style='top:0px;position:absolute;'>
  6.             <div class='cell' style='top:0px;position:absolute;'>
  7.                 <div id='p1r0flts1' class='cell flts xfader_1'>LM234</div>
  8.             </div>
  9.             <div class='cell' style='top:0px;position:absolute;'>
  10.                 <div id='p1r0flts0' class='cell flts xfader_0'>FR1234</div>
  11.             </div>
  12.         </div>
  13.     
  14.         <div class='cell time'>11:30</div>

CSS部分：

  1.     .flts{
  2.     	left: 238px;
  3.     	width: 250px;
  4.         color: White;
  5.         text-align: left;
  6.         background-color: SkyBlue;
  7.     }
  9.     .time{
  10.     	left: 488px;
  11.     	width: 200px;
  12.         color: White;
  13.         text-align: center;
  14.     }
  16.     .sdrow{
  17.         position: absolute;
  18.         left: 0px;
  19.         width: 1920px;
  20.         max-height: 100px;
  21.     
  22.     }

更新：

已添加相对定位和绝对定位，但没有改变任何内容。
下面的不带交替显示的代码不影响时间节点：

  1.     <div class='cell flts' style='background-color:LightSlateGray;'>GMAJY</div>
  2.     
  3.     <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.

  1. <div id='p1r0' class='cell sdrow' style='top:3px;'>
  3.     <div class='cell sp2'> </div>
  5.     <div id='p1r0flts' class='cell  flts' style='top:0px;position:absolute;'>
  6.         <div class='cell' style='top:0px;position:absolute;'>
  7.             <div id='p1r0flts1' class='cell flts xfader_1'>LM234</div>
  8.         </div>
  9.         <div class='cell' style='top:0px;position:absolute;'>
  10.             <div id='p1r0flts0' class='cell flts xfader_0'>FR1234</div>
  11.         </div>
  12.     </div>
  14.     <div class='cell time'>11:30</div>

And the CSS:

  1. .flts{
  2. 	left: 238px;
  3. 	width: 250px;
  4.     color: White;
  5.     text-align: left;
  6.     background-color: SkyBlue;
  7. }
  9. .time{
  10. 	left: 488px;
  11. 	width: 200px;
  12.     color: White;
  13.     text-align: center;
  14. }
  16. .sdrow{
  17.     position: absolute;
  18.     left: 0px;
  19.     width: 1920px;
  20.     max-height: 100px;
  22. }

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:

  1. <div class='cell flts' style='background-color:LightSlateGray;'>GMAJY</div>
  4. <div class='cell time'>11:50</div>

导致相邻元素被隐藏的元素干扰

答案1

得分: 1

使用“弹性”而不是“绝对”定位在航班列上已解决了问题。代码如下：

  1.     <div id='p1r0flts' class='cell flts' style='top:0px; display: flex;'>
  2.         <div class='cell' style='top:0px; position:absolute;'>
  3.             <div id='p1r0flts1' class='cell flts xfader2_1'>
  4.                 LM234
  5.             </div>
  6.         </div>
  7.         <div class='cell' style='top:0px; position:absolute;'>
  8.             <div id='p1r0flts0' class='cell flts xfader2_0'>
  9.                 FR1234
  10.             </div>
  11.         </div>
  12.     </div>
  13.     
  14.     <div class='cell time'>11:30</div>
英文:

Adding 'Flex' instead of 'Absolute' positioning on the flights column has solved the issue. Code as below:

  1. &lt;div id=&#39;p1r0flts&#39; class=&#39;cell  flts&#39; style=&#39;top:0px;position:flex;&#39;&gt;
  2.     &lt;div class=&#39;cell&#39; style=&#39;top:0px;position:absolute;&#39;&gt;
  3.         &lt;div id=&#39;p1r0flts1&#39; class=&#39;cell flts xfader2_1&#39;&gt;
  4.         LM234&lt;/div&gt;
  5.     &lt;/div&gt;
  6.     &lt;div class=&#39;cell&#39; style=&#39;top:0px;position:absolute;&#39;&gt;
  7.         &lt;div id=&#39;p1r0flts0&#39; class=&#39;cell flts xfader2_0&#39;&gt;
  8.         FR1234&lt;/div&gt;
  9. &lt;/div&gt;
  10. &lt;/div&gt;
  12. &lt;div class=&#39;cell time&#39;&gt;11:30&lt;/div&gt;

huangapple
  • 本文由 发表于 2023年2月14日 19:35:40
  • 转载请务必保留本文链接：https://go.coder-hub.com/75447260.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定