CSS位置如何工作，为什么绝对元素堆叠在一起，而不是堆叠在一起
如何在下面的代码中同时获得#row1和#row2 ，并且一个接一个地垂直显示，就好像没有任何absolute/relative定位一样？
<body> <div class="container"> <div id="row1" class="row"> <div class="col1">Hello</div> <div class="col2">World</div> </div> <div id="row2" class="row"> <div class="col1">Salut</div> <div class="col2">le monde</div> </div> </div>
body {position:relative;} .container {position:absolute;} .row {position:relative;} .col1, .col2 {position: absolute;}
http://jsfiddle.net/wjrNQ/
更新
我需要这些元素具有CSS规则中提供的定位，这里排除的原因。 所以我的问题是如果有可能实现我所期待的而不删除上面的CSS？ 即有两个.row div显示为“正常” block元素。
更新2
如果在px指定了足够的高度，则结果具有预期的外观。 但内容是programmitacallydynamic的，所以我不知道事先的高度:(
那么你在这里有一些奇怪的愿望，所以让我解释一下这些职位在CSS中的真正含义以及他们是如何工作的，使用position: relative; 就像使用static position ，不同的是做一个元素的position: relative; ，您将能够使用top ， right ， bottom和left属性，虽然元素将移动，但物理上它将在文档stream中。
来的position: absolute; ，当你做任何元素的position: absolute; ，它就离开了文档stream程，因此，它与任何其他元素无关，所以在你的例子中你有.col1, .col2 {position: absolute;}这些是absolute定位的，因为两者都不在文档中stream，它们会重叠…因为它们已经嵌套在position: absolute; 父母即.container ，因为没有width分配，它将采取最小的width ，因此，你的元素重叠，如果你不能改变你的CSS（根据我没有任何意义，为什么你不能改变）仍然如果你想，比你能做的是这个..
演示 （不删除任何你的position属性）这真的很脏
对于s字符，它将位于top因为您的容器元素不在stream中，因此，在文档stream中不会考虑height ，除非您将某个元素包装到某个元素中，并将其放下， margin padding或CSS定位。
CSS职位解释
正如我所评论的，这里有几个CSS定位实际工作的例子，首先，有4个position属性的值，即static ，这是默认的， relative ， absolute和fixed ，所以从static开始，在这里没什么好学的，元素只能堆叠在一起，除非它们被浮动或display: inline-block ，但static定位， top ， right
演示
前来position: relative; 我已经解释了一般情况，它和static ，它堆积在其他元素上，它在文档stream中，但是你可以使用top ， right ， bottom和left ，物理上调整元素的position停留在stream程中，只有元素的position被改变。
演示2
现在是absolute ，一般很多人不明白，当一个元素是absolute它离开文档stream，因此它保持独立，除非它与其他位置重叠，否则与其他元素的定位无关position: absolute可以是position: absolute元素使用z-index修改更改堆栈级别。 这里要记住的主要是要有一个position: relative; 容器，以便您的absolute定位元素是相对于relative定位的元素，否则您的元素将飞出野外。
值得注意的是position: absolute; 元素absolute;定位时absolute; 在absolute定位的父元素内部，而不是相对于该元素而不是相对于可能relative定位的macros父元素
演示3 （无position: relative;容器）
演示4 （ position: relative;容器）
最后是position fixed ，这是absolute相同的，但它滚动时，它stream动，它不在文档stream，但它滚动，而且， position: fixed; 元素不能relative对于具有任何types的position任何容器元素，甚至不是relative ， fixed元素总是relative对于视口，所以devise者使用position: absolute; 当他们想要有一个fixed position行为，但relative对于父母，并调整top属性onScroll 。
演示5
你想要什么，不可能修改CSS position属性。 然而，你可以做什么，而不用触摸现有的CSS，用更具体的select器来覆盖它
.row .col1, .row .col2 { position: relative; }
看JSFiddle
当position:relative被使用时， 页面布局将在被top, left值偏移之前正常发生 ，然而position：absolute会忽略文档stream 。 relative的工作没有变化，但绝对必须改变
.col1, .col2 {display:inline-block;}
编辑：根据你的情况，也许你可以把你的表放在一个绝对定位的div然后使用正常的文件stream在表内？
<div class="absolute-wrap"> <div class="row"> <div class="col"> </div> </div> </div>
