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?
如何使以下代码中的#row1和#row2都可见，一个接一个地垂直显示，就好像不涉及任何绝对/相对位置一样?
<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/
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 .row divto appear as "normal" block elements.
由于这里排除的原因，我需要元素在CSS规则中提供位置。所以我的问题是，如果不移除上面的CSS，是否有可能实现我想要的东西?例如，将两个.row divto作为“普通”块元素显示。
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中指定了足够的高度，则结果具有预期的外观。但是内容是程序化动态的，所以我不知道事先的高度
3 个解决方案
#1
49
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..
这里有一些奇怪的愿望让我解释一下这些位置在CSS中的真正含义以及它们是如何工作的，使用位置:relative;就像使用静态位置一样，不同之处在于创建一个元素位置: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 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..
来位置:绝对;当你做任何元素位置:绝对的;,它从文档流,因此,它与任何其他元素,所以在你的例子有.col1 .col2 {:绝对;}这是绝对定位,因为都是文档流,他们将重叠……因为它们已经嵌套在位置:绝对;我的父母。e .container由于没有指定宽度，它将占用最小的宽度，因此，如果您不能更改CSS(根据我的说法，这没有任何意义)，那么您的元素就会重叠。
Demo (Without removing any of your position property) And this is really dirty
演示(没有删除任何位置属性)，这真的很脏
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.
对于s字符，它将位于顶部，因为您的容器元素不在流中，因此，在文档流中不会考虑高度，除非并直到您将其封装到某个元素中，并使用边距或CSS定位将其降下来。
CSS Positions Explained
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.
正如我所评论的，这里有一些CSS定位如何工作的例子，首先，位置属性I有4个值。e静态，它是默认的，相对的，绝对的，固定的，所以从静态开始，这里没什么可学的，元素只是在另一个下面堆叠起来，除非它们被浮动或者被显示:inline-block。使用静态定位，上、右、下、左不工作。
演示
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.
来:相对;我已经解释了你一般来说,除了一样静态的,栈上其他元素,它是在文档流中,但是你可以使用前调整元素的位置,右,下,左,身体上,元素流中的停留,只改变元素的位置。
演示2
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.
现在有绝对通常许多无法理解,当一个元素绝对会从文档流,因此保持独立,它与其他元素定位除非是重叠的其他位置:绝对元素可以固定用z - index改变堆栈级别。这里要记住的最重要的是要有一个位置:相对位置;容器，使您的绝对定位元素相对于相对定位元素，否则您的元素将在野外飞行。
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
值得注意的是:绝对;绝对定位时元素;在一个绝对定位的父元素内部，而不是相对于该元素而不是相对于可能定位的父元素
Demo 3 (Without position: relative; container)
演示3(无位置:相对;容器)
Demo 4 (With position: relative; container)
演示4(有位置:相对;容器)
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.
最后是位置固定，这和绝对是一样的但是当你滚动的时候它会沿着方向流动，它不在文档流中，但是它也会滚动，位置固定;元素不能相对于任何具有任何类型位置的容器元素，甚至不是相对的，位置固定元素总是相对于视图端口，所以设计者使用位置:绝对;当他们想要有一个固定的位置行为时，但相对于父母，并调整顶部的属性。
演示5
#2
2
What you want, is not possible without modifying the CSS position property. However, what you can do without touching the existing CSS, is overriding it with a more specific selector
不修改CSS position属性是不可能实现的。但是，在不触及现有CSS的情况下，可以使用更特定的选择器覆盖它
.row .col1, .row .col2 {
position: relative;
}
See JSFiddle
看到JSFiddle
#3
1
when position:relative is used, the page layout will occur normally before being offset by top, left values, however position:absolute will ignore the document flow. The relative ones will work with no changes but absolute must be changed
当使用position:relative时，页面布局在被top、left值抵消之前会正常出现，但是position:absolute会忽略文档流。相对的那些不会改变，但绝对的必须改变
.col1, .col2 {display:inline-block;}
http://jsfiddle.net/C4bQN/
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>
#1
49
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..
这里有一些奇怪的愿望让我解释一下这些位置在CSS中的真正含义以及它们是如何工作的，使用位置:relative;就像使用静态位置一样，不同之处在于创建一个元素位置: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 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..
来位置:绝对;当你做任何元素位置:绝对的;,它从文档流,因此,它与任何其他元素,所以在你的例子有.col1 .col2 {:绝对;}这是绝对定位,因为都是文档流,他们将重叠……因为它们已经嵌套在位置:绝对;我的父母。e .container由于没有指定宽度，它将占用最小的宽度，因此，如果您不能更改CSS(根据我的说法，这没有任何意义)，那么您的元素就会重叠。
Demo (Without removing any of your position property) And this is really dirty
演示(没有删除任何位置属性)，这真的很脏
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.
对于s字符，它将位于顶部，因为您的容器元素不在流中，因此，在文档流中不会考虑高度，除非并直到您将其封装到某个元素中，并使用边距或CSS定位将其降下来。
CSS Positions Explained
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.
正如我所评论的，这里有一些CSS定位如何工作的例子，首先，位置属性I有4个值。e静态，它是默认的，相对的，绝对的，固定的，所以从静态开始，这里没什么可学的，元素只是在另一个下面堆叠起来，除非它们被浮动或者被显示:inline-block。使用静态定位，上、右、下、左不工作。
演示
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.
来:相对;我已经解释了你一般来说,除了一样静态的,栈上其他元素,它是在文档流中,但是你可以使用前调整元素的位置,右,下,左,身体上,元素流中的停留,只改变元素的位置。
演示2
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.
现在有绝对通常许多无法理解,当一个元素绝对会从文档流,因此保持独立,它与其他元素定位除非是重叠的其他位置:绝对元素可以固定用z - index改变堆栈级别。这里要记住的最重要的是要有一个位置:相对位置;容器，使您的绝对定位元素相对于相对定位元素，否则您的元素将在野外飞行。
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
值得注意的是:绝对;绝对定位时元素;在一个绝对定位的父元素内部，而不是相对于该元素而不是相对于可能定位的父元素
Demo 3 (Without position: relative; container)
演示3(无位置:相对;容器)
Demo 4 (With position: relative; container)
演示4(有位置:相对;容器)
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.
最后是位置固定，这和绝对是一样的但是当你滚动的时候它会沿着方向流动，它不在文档流中，但是它也会滚动，位置固定;元素不能相对于任何具有任何类型位置的容器元素，甚至不是相对的，位置固定元素总是相对于视图端口，所以设计者使用位置:绝对;当他们想要有一个固定的位置行为时，但相对于父母，并调整顶部的属性。
演示5
#2
2
What you want, is not possible without modifying the CSS position property. However, what you can do without touching the existing CSS, is overriding it with a more specific selector
不修改CSS position属性是不可能实现的。但是，在不触及现有CSS的情况下，可以使用更特定的选择器覆盖它
.row .col1, .row .col2 {
position: relative;
}
See JSFiddle
看到JSFiddle
#3
1
when position:relative is used, the page layout will occur normally before being offset by top, left values, however position:absolute will ignore the document flow. The relative ones will work with no changes but absolute must be changed
当使用position:relative时，页面布局在被top、left值抵消之前会正常出现，但是position:absolute会忽略文档流。相对的那些不会改变，但绝对的必须改变
.col1, .col2 {display:inline-block;}
http://jsfiddle.net/C4bQN/
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>