我需要将两个表彼此叠放,然后再放置内容。我无法获得随后正常播放的内容。堆叠的桌子高度可变。
HTML结构:
... other content ...
<div id="ChartPanel">
<table id="chart">
<table id="underlay">
</div>
<div id="ExtraInfoPanel">
<table id="extraInfo">
</div>
CSS:
#ChartPanel { width: 100%; position: relative; }
#chart, #underlay { width: 1185px; position: absolute; top: 0; left: 0; }
#extraInfo { ??? }
这些表可以很好地堆叠,但是我还没有弄清楚CSS如何使
extraInfo
在图表之后流动—它始终位于图表的顶部。 最佳答案
我认为您遇到的问题是两个表都是position: absolute;
。这是一个问题,因为它们使它们都脱离了文档流,这意味着它们的高度不会注册为包含父对象的高度的一部分。
但是,您不能将它们都放回文档流中,因为那样您将无法获得参考底图效果。我建议做这样的事情:
#chart, #underlay { width: 1185px; }
#underlay { position: absolute; top: 0px; left: 0px; }
假设它们具有相同的尺寸,则不放置其中一张桌子,而将另一张桌子放在绝对位置。这将保留父容器的尺寸,并允许将两个表放置在同一位置。
Have a look at the result here->
关于css - CSS布局/流程,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5544348/