44

我在将一组 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>
4

4 回答 4

57
  1. 首先，所有块级元素都被静态定位到“文档”。所有元素的默认定位是position: static，这意味着该元素没有定位，而是出现在文档中通常会出现的位置。通常你不会指定这个，除非你需要覆盖之前设置的定位。
  2. 相对位置：如果您指定position: relative，那么您可以使用 top 或 bottom 以及 left 或 right 来相对于它通常在文档中出现的位置移动元素。
  3. 当您指定position: absolute时，该元素将从文档中删除并准确放置在您告诉它的位置。

所以关于你的问题，你应该定位包含块的相对位置，即：

#parent {
  position: relative;
}

您应该将子元素绝对定位到父元素，如下所示：

#child {
  position: absolute;
}

请参阅：通过十个步骤学习 CSS 定位

于 2012-09-11T08:45:40.753 回答
37

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

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
    height:30px;
}
于 2009-07-16T13:29:27.950 回答
8

之一#aor#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">

在此之前正常工作。

于 2009-07-16T13:30:50.680 回答
7

该问题在本文中进行了描述（除其他外） 。

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

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

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

要解决此问题，您需要使所有内容都相对或绝对。

一种方法是：

.a {
   position:relative;
   margin-top:10px;
   margin-left:10px;
   background-color:red;
   width:210px;
   padding: 5px;
}
于 2009-07-16T13:23:36.070 回答