绝对定位

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

W3C说

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

和

盒子的位置..。使用“top”、“right”、“底部”和“左侧”属性指定。

在您的示例中，您还没有为"top“或”底部“(垂直位置)定义一个值。上/左/右/底的初始值为“自动”。所以我相信这就是元素保持垂直位置的原因。实际计算的样式如下所示：

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

这意味着它的行为就像在正常的流中，但是它是100 it更正确的。但是，如果在文档中放置第三个没有绝对位置的框，则绝对框将重叠。

若要将其从左上角定位为100 To，请添加

top:0;

你的CSS。

Answer 2

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

您可以使用位置属性(顶部、左侧、底部和右侧)来设置位置。请记住，这些值将相对于具有相对(或绝对)位置的下一个父元素。

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

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

具有这种定位类型的元素不受其他元素的影响，也不影响其他元素。这是一个严肃的事情，每次你使用绝对定位。

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

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

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

现在，我已经在absolute的位置上做了如下两件事：

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

所以，现在他们是overlapping.See这里：

小提琴

Answer 3

您需要为第二个重叠框添加"top:0“。