CSS布局/流程

Question

我需要在两个表格之间和之后堆叠两个表格。我无法得到正确流动之后的内容。堆放的桌子是可变的高度。

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图表—后流到它总是结束在图表顶部。

Answer 1

我认为你遇到的问题是两个表都是position: absolute;。这是一个问题，因为它将它们都从文档流中取出，这意味着它们的高度不会注册为包含父项高度的一部分。

但是，您不能将它们都放回到文档流程中，因为那样您将不会获得底层效果。我建议做这样的事情：

#chart, #underlay { width: 1185px; } 
#underlay { position: absolute; top: 0px; left: 0px; } 

假设它们具有相同的尺寸，独自离开一个表，使相邻定位绝对。这将保留父容器的尺寸，并允许两个表放置在同一位置。

Have a look at the result here->

Answer 2

尝试添加浮动到您的div，并为额外的信息添加明确：两个;

祝你好运。

Answer 3

因为你#ChartPanel的内容为空（你的表是绝对的，所以挑选了#ChartPanel的。你不必留在你的#ChartPanel任何高度。试着增加高度#ChartPanel。

#ChartPanel { 
    width: 100%; 
    height:500px; /* <-- very new */ 
    position: relative; } 
#chart, #underlay { 
    width: 1185px; 
    position: absolute; 
    top: 0; left: 0; } 
#extraInfo { 
    /* maybe even just... nothing, or some relative positioning. */ 
} 

Answer 4

#chart, #underlay { width: 1185px; position: absolute; top: 0; left: 0; } 

你为什么在完全相同的点进行定位，这两个表的

仅供参考，当你的位置：？绝对的，你把对象从文档流的，所以它得到棘手然后弄清楚如何在视觉上放置下面的东西，因为CSS不知道定位元素的底部已经在哪里了。

如果您需要并排放置事物，最好使用浮动元素，然后您可以使用浮动元素包含父级包装元素。