CSS Positions如何工作,为什么绝对元素相互堆叠而不是一个接一个地堆叠
Fel*_*ger 26 html css css-position
怎样才能既#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;}
更新
由于此处排除的原因,我需要在CSS规则中提供定位的元素.所以我的问题是,如果不删除上面的CSS就可以实现我正在寻找的东西？.row div即将两者视为"正常" block元素.
更新2
如果指定了足够的高度px,则结果具有预期的外观.但内容是programmitacacally动态所以我不知道事先的高度:(
Mr.*_*ien 58
那么你有一些奇怪的愿望在这里,所以让我解释一下什么那些位置在CSS的真正含义,他们是如何工作的,使用position: relative;时就像使用static position,所不同的是使一个元素position: relative;,你就可以使用top,right,bottom和left性质,虽然元素将移动,但物理上它将在文档流程中..
来到position: absolute;,当你做出的任何元素position: absolute;,它得到了公文流转,因此,它没有任何关系的任何其他元素,所以在您的例子中,你已经.col1, .col2 {position: absolute;}被定位absolute并因为两者都出了公文流转,他们会重叠...因为它们已经嵌套在position: absolute;父级之下.container,因为没有width分配,所以它将占用最小的width因此,你的元素重叠,如果你不能改变你的CSS(根据我的说法没有任何意义,为什么你可以如果你愿意,仍然可以改变,你可以做的就是这个......
演示(不删除任何position属性)这真的很脏
对于s字符,它将位于top您的容器元素不在流程中,因此,height在文档流程中不会考虑,除非并且直到您将其包装s在某个元素中,然后将其置于其中,margin padding或者CSS定位.
CSS职位解释
正如我评论的那样,这里有几个CSS定位实际工作的例子,首先,有4个position属性值,即static默认值relative,absolute并且fixed,所以从static这里开始,没有什么可以学到的,元素只是在下面叠加一个另一个,除非他们浮动或制造display: inline-block.随着static定位top,right,bottom并且left将无法正常工作.
来到position: relative;我已经在一般的解释你,这只不过是一样的static,它可以叠加其他元素,它是在公文流转,但你可以调整的元素position使用top,right,bottom和left,物理,元素停留在流,只position改变了元素.
现在absolute通常很多人都无法理解,当制作一个元素absolute它从文档流中走出来,因此它保持独立时,它与其他元素定位无关,除非它与其他元素重叠position: absolute,可以使用它z-index来修改堆栈级别.这里要记住的主要事情是有一个position: relative;容器,以便你的absolute定位元素相对于relative定位元素,否则你的元素将在野外飞出.
值得注意的是,position: absolute;元素位于定位的父元素absolute;内部时absolute,而不是相对于该元素而不是相对于可定位的祖母元素relative
演示3(没有position: relative;容器)
演示4(带position: relative;容器)
最后就是position fixed,这是一样的absolute,但是当你把它的滚动一起流动,这是出了公文流转,但它滚动,也position: fixed;元素不能relative具有任何类型的任何容器元素position,甚至没有relative,position fixed元素始终relative视口,所以设计师position: absolute;在他们想要fixed position行为时使用,但是relative对父母进行调整并调整top属性onScroll.
- 通过使用`position:absolute;`并省略`top`和`left`,你也可以将元素从流中取出并将它显示在父节点内:http://jsfiddle.net/mD6n6/113/ (3认同)