理论

Question

我正在使用以下HTML / CSS来理解＆＃34;绝对＆＃34;在CSS中：

以下是相关部分：

.concentric-rectangle {
    display: block;
    //position: absolute;
    top: 50%;
    display: inline-block;
    width: 150px;
    height: 150px;
}

当＆＃34;位置：绝对＆＃34;注释，它按预期正确显示两行。但是，当它取消注释时，它将两者合并为一行。为什么呢？

我通过添加＆＃34; myrow＆＃34;进行了实验。 class是所有列的父级（col-md-3）并将其位置声明为relative。我希望在这样做之后如果我取消注释＆＃34; position：absolute＆＃34;然后两行的渲染不会重叠。但是，它仍然存在。

是什么导致它们重叠？

编辑：当myrow是相对的时，我看到http://i.imgur.com/N9PNj4B.png，当两者都是静态时，CR是绝对的，而http://i.imgur.com/ljfKKX5.png。SqlCommand.Parameters Property有什么想法吗？

Answer 1

position: absolute实际上将元素相对（haha）定位到不是position: static的最内层元素（这是默认值）。

通常情况下，您使用的祖先位置position: relative没有改变其位置的内容（因此没有top，bottom，left或right属性）。这与position: static相同（因为这是相对位置相对的），除了它为具有绝对位置的元素创建包含块。

（真棒）Learn CSS Layout教程有一章position。

在实践中

在您的情况下，我看到两行具有以下位置组合：

.myrow { position: relative; }
.concentric-rectangle { position: absolute; }

如果.myrow获得静态定位，则所有.concentric-rectangle都相对于视口而不是其行定位。

Answer 2

当您在CSS中将某些内容定位为绝对内容时，它基本上会停止占用页面上的实际空间。该文档将堆叠在彼此之上且具有相同绝对定位的任何元素。您需要2个绝对定位的元素才能拥有两个不同的绝对位置。

编辑：澄清一下，只有绝对定位的元素具有相同的父元素时才会出现这种情况。如果他们有不同的父母，那么他们可以有相同的定位，但会出现在页面的不同位置。