绝对定位

Question

我正在尝试了解定位的基础知识，我在互联网上看到了这个显示特定属性的示例。本质上，他们用 CSS 创建了两个盒子：

#box_1 { 
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 { 
position: absolute;
left: 100px;
width: 200px;
height: 200px;
background: #44accf;
}

因为绝对定位将容器相对于它的第一个父元素放置，所以第二个框不应该放在浏览器的顶部，然后离开 100 像素吗？有了这个绝对定位的定义，两个框不应该重叠吗？相反，第二个框最终位于第一个框下方。我认为绝对定位会从页面的正常流程中删除一个对象？谁能给我解释一下？

这就是我所说的：http://jsfiddle.net/WScGM/

Answer 1

您需要为第二个框添加“top:0”以进行重叠。

Answer 2

W3C says:

绝对定位的盒子从正常流程中取出。

和

盒子的位置...由'top'、'right'、'bottom'和'left'属性指定

在您的示例中，您尚未定义“顶部”或“底部”（垂直位置）的值。 top/left/right/bottom 的初始值为“auto”。所以我相信这就是元素保持垂直位置的原因。实际计算的样式如下所示：

position:absolute;
left:100px;
right:auto;
top:auto;
bottom:auto;

这意味着它的行为就像它在正常流程中一样，但它比正常流程多 100 像素。 但是如果你在文档中放了第三个没有绝对定位的框，那么绝对的就会重叠在它上面。

要将其放置在距左上边缘 100 像素的位置，请添加

top:0;

到您的 CSS。

Answer 3

绝对定位是一种非常强大的定位类型，它允许您将任何页面元素准确地放置在您想要的位置。

可以使用定位属性top、left bottom和right来设置位置。请记住，这些值将相对于具有相对（或绝对）定位的下一个父元素。

如果没有这样的父元素，它将默认一直回到元素本身，这意味着它将相对于页面本身放置。

关于绝对定位的权衡，也是最重要的事情要记住，这些元素是从页面上的元素流中删除的。

具有这种定位的元素不受其他元素的影响，也不会影响其他元素。每次使用绝对定位时都要考虑这一点。

现在你的问题来了：不应该把第二个框放在浏览器的顶部，然后留下 100 像素吗？ 有了这个绝对定位的定义，不应该两个框重叠？

当然，根据绝对定位的定义，如果两个框都处于绝对定位中，则两个框应该重叠。

这是因为默认情况下其中一个处于静态定位。

现在我在absolute 的位置都做了如下：

#box_1 { 
    width: 200px;
    height: 200px;
    background: #ee3e64;
    position:absolute;
}
#box_2 { 
    position: absolute;
    left: 100px;
    width: 200px;
    height: 200px;
    background: #44accf;
}

所以，现在它们重叠了。请看这里：

FIDDLE