如何在div中定位绝对？

I'm having a strange problem positioning a set of divs inside another div. I think it will be best to describe it with an image:

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

Inside the black (#box) div there are two divs (.a, .b) that have to positioned in the same place. What I'm trying to achieve is pictured in the first image, second one is the effect I get. It looks like if the divs were floated without clearing or something, which is obviously not the case. Any ideas would be welcome!

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

Here's the code for this sample:

这是此示例的代码：

CSS:

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:

HTML：

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

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

4 个解决方案

#1

The absolute divs are taken out of the flow of the document so the containing div does not have any content except for the padding. Give #box a height to fill it out.

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

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

#2

1. First all block level elements are postioned static to the 'document'. The default positioning for all elements is position: static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.
2. 首先，所有块级元素都是静态的“文档”。所有元素的默认定位是position：static，这意味着元素未定位并出现在文档中通常的位置。通常您不会指定此项，除非您需要覆盖之前设置的定位。
3. Relative position: If you specify position: relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
4. 相对位置：如果指定position：relative，则可以使用top或bottom，left或right来相对于文档中通常出现的位置移动元素。
5. When you specify position: absolute, the element is removed from the document and placed exactly where you tell it to go.
6. 当您指定position：absolute时，该元素将从文档中删除，并准确放置在您告诉它的位置。

So in regard to your question you should position the containing block relative, i.e:

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

#parent {
  position: relative;
}

And the child element you should position absolute to the parent element like this:

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

#child {
  position: absolute;
}

---

See: Learn CSS Positioning in Ten Steps

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

#3

The problem is described (among other) in this article.

本文描述了这个问题（以及其他内容）。

#box is relatively positioned, which makes it part of the "flow" of the page. Your other divs are absolutely positioned, so they are removed from the page's "flow".

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

Page flow means that the positioning of an element effects other elements in the flow.

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

In other words, as #box now sees the dom, .a and .b are no longer "inside" #box.

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

To fix this, you would want to make everything relative, or everything absolute.

要解决这个问题，您可能希望将所有内容都设为相对，

One way would be:

一种方法是：

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

#4

One of #a or #b needs to be not position:absolute, so that #box will grow to accommodate it.

#a或#b中的一个不需要位置：绝对，因此#box将增长以适应它。

So you can stop #a from being position:absolute, and still position #b over the top of it, like this:

所以你可以阻止#a成为位置：绝对，并且仍然将#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>

(Note that I've made the widths different, so you can see one behind the other.)

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

Edit after Justine's comment: Then your only option is to specify the height of #box. This:

在Justine的评论之后编辑：然后你唯一的选择是指定#box的高度。这个：

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

works perfectly, assuming the heights of a and b are fixed. Note that you'll need to put IE into standards mode by adding a doctype at the top of your HTML

假设a和b的高度是固定的，那么效果很好。请注意，您需要通过在HTML顶部添加doctype来将IE置于标准模式

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

before that works properly.

在此之前正常工作。