Html 为什么绝对元素相互堆叠而不是一个接一个堆叠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20718577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why do absolute elements stack up on each other instead of stacking one after the other?
提问by Fellow Stranger
How can get both #row1and #row2in the following code to be visible, one after the other vertically, as if there wasn't any absolute/relativepositioning involved?
怎样才能既#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;}
Update
更新
I need the elements to have the positioning provided in the CSS rules, for reasons excluded here. So my question is if it's possible to achieve what I'm looking for without removing the above CSS? I.e. having the two .rowdivto appear as "normal" blockelements.
由于此处排除的原因，我需要元素具有 CSS 规则中提供的定位。所以我的问题是是否有可能在不删除上述 CSS 的情况下实现我正在寻找的东西？即让这两个.rowdiv显示为“正常”block元素。
Update 2
更新 2
If enough height is specified in px, the result have the expected look. But the content is programmitacally dynamic so I don't know the height on beforehand :(
如果在 中指定了足够的高度px，则结果具有预期的外观。但是内容是编程动态的，所以我事先不知道高度:(
回答by Mr. Alien
Well you have some weird wishes here so let me explain you what those positions really mean in CSS and how they work, using position: relative;is just like using staticposition, the difference is making an element position: relative;, you will be able to use top, right, bottomand leftproperties, though the element will move, but physically it will be in the document flow..
那么你有一些奇怪的愿望在这里，所以让我解释一下什么那些位置在CSS的真正含义，他们是如何工作的，使用position: relative;时就像使用staticposition，所不同的是使一个元素position: relative;，你就可以使用top，right，bottom和left性质，虽然元素会移动，但物理上它会在文档流中..
Coming to position: absolute;, when you make any element position: absolute;, it gets out of the document flow, hence, it has nothing to do with any other element, so in your example
you have .col1, .col2 {position: absolute;}which are positioned absoluteand since both are out of the document flow, they will overlap... Because they are already nested under position: absolute;parent i.e .containerand since no widthis assigned, it will take the minimal widthand hence, your elements overlap, if you cannot change your CSS(which according to me doesn't make any sense why you can't change) still if you want, than you can do is this..
来到position: absolute;，当您制作任何元素时position: absolute;，它会脱离文档流，因此，它与任何其他元素无关，因此在您的示例中，您具有.col1, .col2 {position: absolute;}定位，absolute并且由于两者都在文档流之外，因此它们将重叠...因为它们已经嵌套在position: absolute;父级 ie 下，.container并且由于没有width分配，所以width如果您不能更改 CSS（根据我的说法，这没有任何意义，为什么您可以't 改变）如果你愿意，你能做的就是这个..
Demo(Without removing any of your positionproperty) And this is really dirty
演示（不删除您的任何position财产）这真的很脏
For the scharacters, it will be at the topas your container element is out of the flow, and hence, no heightwill be considered in the document flow, unless and until you wrap that sin some element, and bring it down with, marginpaddingor CSS Positioning.
对于s字符，它将在top您的容器元素不在流中时，因此，height文档流中不会考虑no ，除非并且直到您将其包装s在某个元素中，并使用marginpadding或 CSS 定位将其放下.
CSS Positions Explained
CSS 位置解释
As I commented, here are few examples of how CSS Positioning actually works, to start with, there are 4 values for positionproperty i.e staticwhich is the default one, relative, absoluteand fixed, so starting with static, nothing to learn much here, elements just stackup one below the other unless they are floated or made display: inline-block. With staticpositioning, top, right, bottomand leftwon't work.
正如我所评论的，这里有几个关于 CSS 定位实际工作原理的示例，首先，position属性有 4 个值，即static默认值relative，absolute和fixed，所以从 开始static，这里没什么可学的，元素只是在下面叠加一个另一个除非它们是浮动的或制造的display: inline-block。有了static定位，top，right，bottom并且left将无法正常工作。
Coming to position: relative;I've already explained you in general, it's nothing but same as static, it stacks up on other element, it is in the document flow, but you can tweak the elements positionusing top, right, bottomand left, physically, the element stays in the flow, only positionof the element is changed.
来到position: relative;我已经向您解释了一般情况，它只不过是相同的static，它叠加在其他元素上，它在文档流中，但是您可以position使用top,来调整元素right，bottom并且在left物理上，元素保持在流中，只有position元素的改变。
Now comes absolutewhich generally many fails to understand, when making an element absoluteit gets out of the document flow, and hence it stays independent, it has nothing to do with other elements positioning unless it's overlapped by other position: absoluteelement which can be fixed using z-indexto change the stack level. The main thing to remember here is to have a position: relative;container so that your absolutepositioned element is relativeto that relativepositioned element, else your element will fly out in the wild.
现在来了absolute，通常很多人都无法理解，当制作一个元素时，absolute它会脱离文档流，因此它保持独立，它与其他元素的定位无关，除非它与其他元素重叠，这些position: absolute元素可以通过z-index更改来修复堆栈级别。这里要记住的主要事情是有一个position: relative;容器，以便您的absolute定位元素相对于该relative定位元素，否则您的元素将在野外飞出。
It's worth noting that position: absolute;element when positioned absolute;inside an absolutepositioned parent element, than it is relative to that element and not relativeto the grand parent element which may be positioned relative
值得注意的是，position: absolute;当元素定位absolute;在absolute定位的父元素内时，它是相对于该元素而不是相对于可能被定位的祖父元素relative
Demo 3(Without position: relative;container)
演示 3（无position: relative;容器）
Demo 4(With position: relative;container)
演示 4（带position: relative;容器）
Last is position fixed, this is same as absolutebut it flows along when you scroll, it's out of the document flow, but it scrolls, also, position: fixed;element cannot be relativeto any container element having any type of position, not even relative, positionfixedelement is always relativeto the viewport, so designers use position: absolute;when they want to have a fixedpositionbehavior but relativeto parent and tweak the topproperty onScroll.
最后是position fixed，这与absolute但它在滚动时流动，它在文档流之外，但它滚动，而且，position: fixed;元素不能是relative任何类型的容器元素position，甚至不是relative，positionfixed元素总是relative到视口，所以设计师position: absolute;在他们想要有一个fixedposition行为但relative父母和调整top属性时使用onScroll。
回答by Olaf Dietsche
What you want, is not possible without modifying the CSS positionproperty. However, what you can do without touching the existing CSS, is overriding it with a more specific selector
你想要的，不修改 CSSposition属性是不可能的。但是，您可以在不触及现有 CSS 的情况下使用更具体的选择器覆盖它
.row .col1, .row .col2 {
position: relative;
}
See JSFiddle
回答by roo2
when position:relativeis used, the page layout will occur normallybefore being offset by top, leftvalues, however position:absolutewill ignore the document flow. The relativeones will work with no changes but absolute must be changed
当position:relative被使用时，通常将发生的页面布局由偏移之前top, left的值，但是位置是：绝对会忽略文档流。在relative那些将在不改变工作，但绝对必须改变
.col1, .col2 {display:inline-block;}
EDIT: Depending on your circumstances, maybe you can wrap your table in an absolute positioned div then use normal document flow within the table?
编辑：根据您的情况，也许您可以将表格包装在绝对定位的 div 中，然后在表格中使用正常的文档流？
<div class="absolute-wrap">
<div class="row">
<div class="col"> </div>
</div>
</div>
