Question

我有一个奇怪的问题，在另一个div中定位一组div。我认为最好用图像来描述它：

在黑色（#box）div中，有两个div（.a，.b）必须放在同一个地方。我想要实现的是第一张图片，第二张是我得到的效果。看起来如果div没有清除或什么东西浮动，显然不是这种情况。任何想法都会受到欢迎！

以下是此示例的代码：

CSS：

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
}

.a {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #fff;
    padding: 5px;
}

.b {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: red;
    padding: 5px;
}

#after {
    background-color: yellow;
    padding: 10px;
    width: 220px;
}

HTML：

    <div id="box">
        <div class="a">Lorem</div>
        <div class="b">Lorem</div>
    </div>

    <div id="after">Hello world</div>

Answer 1

首先，所有块级元素都是静态的“文档”。所有元素的默认定位是position: static，这意味着元素未定位并出现在文档中通常的位置。通常您不会指定此项，除非您需要覆盖之前设置的定位。
相对位置：如果指定position: relative，则可以使用顶部或底部，左侧或右侧来移动元素相对于文档中通常出现的位置。
当您指定position: absolute时，该元素将从文档中删除，并准确放置在您告诉它的位置。

因此，关于你的问题，你应该将包含块定位为相对的，即：

#parent {
  position: relative;
}

你应该将子元素置于父元素中，如下所示：

#child {
  position: absolute;
}

请参阅：Learn CSS Positioning in Ten Steps

Answer 2

绝对div从文档流中取出，因此包含div除了填充之外没有任何内容。给#box一个高度来填充它。

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
    height:30px;
}

Answer 3

#a或#b中的一个必须不是position:absolute，因此#box会增长以适应它。

因此，您可以阻止#a成为position:absolute，并将#b置于其顶部，如下所示：

 #box {
        background-color: #000;
        position: relative;     
        padding: 10px;
        width: 220px;
    }
    
    .a {
        width: 210px;
        background-color: #fff;
        padding: 5px;
    }
    
    .b {
        width: 100px; /* So you can see the other one */
        position: absolute;
        top: 10px; left: 10px;
        background-color: red;
        padding: 5px;
    }
    
    #after {
        background-color: yellow;
        padding: 10px;
        width: 220px;
    }

    <div id="box">
        <div class="a">Lorem</div>
        <div class="b">Lorem</div>
    </div>
    <div id="after">Hello world</div>

（请注意，我的宽度不同，所以你可以看到另一个。）

在Justine的评论之后

编辑：然后你唯一的选择是指定#box的高度。这样：

#box {
    /* ... */
    height: 30px;
}

假设a和b的高度是固定的，

完美地工作。请注意，您需要通过在HTML顶部添加doctype来将IE置于标准模式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">

在此之前

正常工作。

Answer 4

问题在this article中描述（以及其他）。

#box相对定位，这使其成为页面“流”的一部分。您的其他div绝对定位，因此它们将从页面的“流程”中删除。

页面流意味着元素的定位会影响流中的其他元素。

换句话说，当#box现在看到dom时，.a和.b不再是“内部”#box。

要解决这个问题，你可能希望将所有内容都设为相对的，或者一切都是绝对的。

一种方法是：

.a {
   position:relative;
   margin-top:10px;
   margin-left:10px;
   background-color:red;
   width:210px;
   padding: 5px;
}

如何在div中定位绝对？

4 个答案: