我正在使用以下 HTML/CSS 来理解 CSS 中的“绝对”:
http://jsfiddle.net/x0rp29kx/9/
相关部分如下:
.concentric-rectangle {
display: block;
//position: absolute;
top: 50%;
display: inline-block;
width: 150px;
height: 150px;
}
当“position: absolute”被注释时,它正确地显示了两行,正如预期的那样。但是,当它未被注释时,它会将两者合并为一行。为什么?
我尝试将“myrow”类添加到所有列 (col-md-3) 的父级,并将其位置声明为相对的。我希望在这样做之后,如果我取消注释“position: absolute”,那么两行的渲染将不会重叠。然而,它仍然如此。
是什么导致它们重叠?
编辑:我看到这个 http://i.imgur.com/N9PNj4B.png当 myrow 是相对的而 CR 是绝对的时与此 http://i.imgur.com/ljfKKX5.png当两者都是静态的。有什么想法吗?
最佳答案
理论
position: absolute
实际上将元素定位到最里面的元素(哈哈),而不是 position: static
(这是默认设置)。
通常,您在某处使用具有 position: relative
的祖先,没有任何改变其位置的东西(因此没有 top
、bottom
、left
或 right
属性)。这与 position: static
相同(因为这是相对位置的相对位置),除了它为具有绝对位置的元素创建包含 block 。
CSS2 §10.1 Definition of "containing block"
(很棒)Learn CSS Layout教程有一章关于position .
实践
在您的例子中,我看到两行具有以下位置组合:
.myrow { position: relative; }
.concentric-rectangle { position: absolute; }
如果 .myrow
获得静态定位,则所有 .concentric-rectangle
都相对于视口(viewport)而不是它们的行定位。
关于css - 关于 CSS absolute 的基本查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31062956/