CSS 如何在div中定位绝对值？

How to position absolute inside a div?

提问by Justine

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>

采纳答案by Emily

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;
}

回答by Jimmy Obonyo Abor

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. 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.
3. When you specify position: absolute, the element is removed from the document and placed exactly where you tell it to go.

1. 首先，所有块级元素都静态定位到“文档”。所有元素的默认定位是position: static，这意味着该元素未定位并出现在文档中通常会出现的位置。通常您不会指定此项，除非您需要覆盖先前设置的定位。
2. 相对位置：如果指定position: relative，则可以使用顶部或底部以及向左或向右移动元素相对于它在文档中通常出现的位置。
3. 当您指定 时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 定位

回答by RichieHindle

One of #aor #bneeds to be not position:absolute, so that #boxwill grow to accommodate it.

之一#aor#b需要不是position:absolute，以便#box将增长以适应它。

So you can stop #afrom being position:absolute, and still position #bover the top of it, like this:

所以你可以停止#ais 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>

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

（请注意，我使宽度不同，因此您可以看到一个在另一个后面。）

Editafter 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.

在此之前正常工作。

回答by Tim Hoolihan

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

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

#boxis 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 #boxnow 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;
}