【问题标题】：Why do absolute elements stack up on each other instead of stacking one after the other?为什么绝对元素彼此堆叠而不是一个接一个地堆叠？
【发布时间】：2013-12-21 11:38:35
【问题描述】：

如何才能让下面代码中的#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 的情况下实现我正在寻找的东西？ IE。让两个 .row div 显示为“正常”block 元素。

更新 2

如果在px 中指定了足够的高度，则结果具有预期的外观。但是内容是动态的，所以我事先不知道高度:(

【问题讨论】：

jsfiddle.net/wjrNQ/1
好吧——不要使用绝对定位！只要 col1/col2 具有绝对位置，它们就会忽略行上的任何更改。
不要使用定位 jsfiddle.net/wjrNQ/2 虽然我没有回答，因为我不确定你在这里问什么
感谢您的反馈，请查看更新后的问题。

标签： html css css-position

【解决方案1】：

好吧，你在这里有一些奇怪的愿望，所以让我解释一下这些位置在 CSS 中的真正含义以及它们是如何工作的，使用 position: relative; 就像使用 static position 一样，不同之处在于创建一个元素 @987654332 @，您将能够使用top、right、bottom 和left 属性，虽然元素会移动，但实际上它会在文档流中..

来到position: absolute;，当你创建任何元素position: absolute;时，它会脱离文档流，因此，它与任何其他元素无关，所以在你的例子中你有.col1, .col2 {position: absolute;}，它们位于absolute，并且由于两者都在文档流之外，它们将重叠......因为它们已经嵌套在position: absolute;父级下，即.container，并且由于没有分配width，它将占用最少的width，因此，如果您无法更改 CSS（根据我的说法，为什么不能更改），您的元素会重叠，如果您愿意，您可以这样做..

Demo（不删除您的任何position 属性）这真的很脏

对于s 字符，它将位于top，因为您的容器元素不在流中，因此，在文档流中不会考虑height，除非并且直到您包装该@ 987654349@ 在某些元素中，并使用 margin padding 或 CSS 定位将其降低。

CSS 位置解释

正如我所评论的，这里有几个 CSS 定位实际如何工作的示例，首先，position 属性有 4 个值，即static，这是默认值，relative、absolute 和 @ 987654356@，所以从static 开始，这里没什么可学的，元素只是在另一个下面堆叠，除非它们是浮动的或制作display: inline-block。使用static 定位，top、right、bottom 和left 将不起作用。

Demo

来到position: relative; 我已经大致解释过你，它与static 相同，它堆叠在其他元素上，它在文档流中，但你可以调整元素position 使用top、right、bottom和left，在物理上，元素保持在流中，只有元素的position发生了变化。

Demo 2

现在absolute 出现了，这通常很多人都无法理解，当创建一个元素absolute 时，它会脱离文档流，因此它保持独立，它与其他元素的定位无关，除非它被其他元素重叠position: absolute 可以使用z-index 修复的元素以更改堆栈级别。这里要记住的主要事情是拥有一个position: relative; 容器，以便您的absolute 定位元素相对到该relative 定位元素，否则您的元素将在野外飞出。

值得注意的是，position: absolute; 元素在定位于 absolute 的父元素内定位 absolute; 时，它与该元素相关，而 不相对 可能是定位relative

Demo 3（没有position: relative;容器）

Demo 4（带有position: relative;容器）

最后一个是position fixed，这个和absolute一样，但是滚动的时候会顺流，不在文档流之外，但是会滚动，而且position: fixed;元素不能是relative到任何容器元素具有任何类型的position，甚至没有relative，position fixed 元素始终是relative 到视口，因此设计人员在他们想要fixed position 行为时使用position: absolute;，但relative 为父级并调整 top 属性 onScroll。

Demo 5

【讨论】：

通过使用position: absolute;并省略top和left，您还可以将元素从流中取出并显示在父元素中：jsfiddle.net/mD6n6/113

【解决方案2】：

如果不修改 CSS position 属性，就不可能实现您想要的。但是，您可以在不触及现有 CSS 的情况下使用更具体的选择器覆盖它

.row .col1, .row .col2 {
    position: relative;
}

见JSFiddle

【讨论】：

【解决方案3】：

当使用position:relative 时，页面布局将正常发生，然后被top, left 值偏移，但是position:absolute 将ignore the document flow。 relative 不会改变，但绝对值必须改变

.col1, .col2 {display:inline-block;}

http://jsfiddle.net/C4bQN/

编辑：根据您的情况，也许您可以将表格包装在绝对定位的 div 中，然后在表格中使用正常的文档流？

<div class="absolute-wrap">
    <div class="row"> 
        <div class="col"> </div>
    </div>
</div>

【讨论】：