为什么绝对元素彼此堆叠而不是一个又一个地堆叠? [英] Why do absolute elements stack up on each other instead of stacking one after the other?
问题描述
如何在下面的代码中同时使#row1和#row2可见，就像没有涉及任何absolute/relative定位?
How can get both #row1 and #row2 in the following code to be visible, one after the other vertically, as if there wasn't any absolute/relative positioning involved?
<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;}
更新
由于这里没有列出的原因，我需要元素具有CSS规则中提供的位置.所以我的问题是，在不删除上述CSS的情况下是否有可能实现我想要的? IE.具有两个.row div来显示为普通" block元素.
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 .row divto appear as "normal" block elements.
更新2
如果在px中指定了足够的高度，则结果具有预期的外观.但是内容是程序动态的，所以我事先不知道高度:(
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 :(
推荐答案
在这里您有一些怪异的愿望，所以让我向您解释这些位置在CSS中的真正含义以及它们的工作方式，使用position: relative;就像使用static position，区别在于制作元素position: relative;，您将能够使用top，right，bottom和left属性，尽管该元素会移动，但实际上会移动在文档流中.
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 static position, the difference is making an element position: relative;, you will be able to use top, right, bottom and left properties, though the element will move, but physically it will be in the document flow..
来到position: absolute;，当您将任何元素制成position: absolute;时，它都会脱离文档流，因此，它与任何其他元素无关，因此在您的示例中
您将.col1, .col2 {position: absolute;}放在了absolute位置，并且由于它们都不在文档流中，因此它们将重叠...因为它们已经嵌套在position: absolute;父级(即.container)下，并且由于未分配任何width，这将占用最小的width，因此，如果您无法更改CSS(如果我无法更改的话，您的元素也会重叠)(根据我的看法，为什么您不能更改CSS仍然没有意义)，那么您可以做的就是..
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 absolute and since both are out of the document flow, they will overlap... Because they are already nested under position: absolute; parent i.e .container and since no width is assigned, it will take the minimal width and 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属性)这真的很脏
对于s字符，当容器元素不在流程中时，它将位于top处，因此，除非且直到您包装s并添加margin padding或CSS定位.
For the s characters, it will be at the top as your container element is out of the flow, and hence, no height will be considered in the document flow, unless and until you wrap that s in some element, and bring it down with, margin padding or CSS Positioning.
正如我所评论的，这里有几个CSS定位实际工作方式的示例，首先，position属性有4个值，即static是默认值，relative，absolute和fixed，因此从static开始，这里没有什么要学的东西，除非将元素浮动或做成display: inline-block，否则它们只是一个堆叠在另一个之下.使用static定位时，top，right，bottom和left将不起作用.
As I commented, here are few examples of how CSS Positioning actually works, to start with, there are 4 values for position property i.e static which is the default one, relative, absolute and 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 static positioning, top, right, bottom and left won't work.
来到position: relative;，我已经向您总体上进行了解释，它与static没什么不同，它堆叠在其他元素上，位于文档流中，但是您可以使用以下方法调整元素position: top，right，bottom和left，实际上，元素停留在流中，只有元素的position被更改.
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 position using top, right, bottom and left, physically, the element stays in the flow, only position of the element is changed.
现在出现了absolute，通常很多人都无法理解，当制作元素absolute时，它脱离了文档流，因此保持独立，除非与其他元素重叠，否则它与其他元素的放置无关.可以使用z-index固定的position: absolute元素来更改堆栈级别.这里要记住的主要事情是拥有一个position: relative;容器，以便使absolute定位的元素相对于relative定位的元素 ，否则您的元素将在野外飞散.
Now comes absolute which generally many fails to understand, when making an element absolute it 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: absolute element which can be fixed using z-index to change the stack level. The main thing to remember here is to have a position: relative; container so that your absolute positioned element is relative to that relative positioned element, else your element will fly out in the wild.
值得注意的是，当position: absolute;元素放置在absolute放置的父元素内时，它是相对于该元素的，而不是相对于盛大父元素的 定位relative
It's worth noting that position: absolute; element when positioned absolute; inside an absolute positioned parent element, than it is relative to that element and not relative to the grand parent element which may be positioned relative
演示3 (无position: relative;容器)
演示4 (带有position: relative;容器)
最后一个是position fixed，与absolute相同，但是在滚动时它会顺着流动，不在文档流中，但是它也会滚动，position: fixed;元素也不能是relative到任何容器元素具有任何类型的position，甚至没有relative，position fixed元素始终是视口的relative，因此设计人员在希望具有fixed position行为时使用position: absolute; relative设置父级并调整top属性onScroll.
Last is position fixed, this is same as absolute but it flows along when you scroll, it's out of the document flow, but it scrolls, also, position: fixed; element cannot be relative to any container element having any type of position, not even relative, position fixed element is always relative to the viewport, so designers use position: absolute; when they want to have a fixed position behavior but relative to parent and tweak the top property onScroll.
这篇关于为什么绝对元素彼此堆叠而不是一个又一个地堆叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
