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 says：

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

和

框的位置...指定为＆＃39; top＆＃39;，＆＃39; right＆＃39;，＆＃39; bottom＆＃39;＆＃39; left＆＃39;特性

在您的示例中，您还没有为＆＃34; top＆＃34;定义一个值。或＆＃34;底部＆＃34; （垂直位置）。顶部/左侧/右侧/底部的初始值为＆＃34; auto＆＃34;。所以我相信这就是元素保持垂直位置的原因。实际计算的样式将如下所示：

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

这意味着它的行为就像它在正常流程中一样，但它的正确率是100px。但是如果你在文档中放置了没有绝对定位的第三个框，那么绝对的框将与它重叠。

要将其从左上边缘定位100px，请添加

top:0;

到您的CSS。

Answer 2

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

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

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

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

具有此类定位的元素不受其他元素的影响，并且不会影响其他元素。每次使用绝对定位时都要考虑这个问题。

现在提出你的问题：不应该将第二个框放在浏览器的顶部，然后保留100个像素？ 使用这个绝对定位的定义，不应该＆＃ 39;两个框重叠？

是的当然，通过绝对定位的定义，如果两者都处于绝对定位，则两个框应该重叠。

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

现在我已经在absolute位置做了如下：

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

等等，现在它们重叠了。见这里：

FIDDLE

Answer 3

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

绝对定位

3 个答案: