我需要将两个表彼此叠放,然后再放置内容。我无法获得随后正常播放的内容。堆叠的桌子高度可变。

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/

10-12 13:01
查看更多