css - 关于 CSS absolute 的基本查询

Question

我正在使用以下 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当两者都是静态的。有什么想法吗？

Answer 1

理论

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)而不是它们的行定位。