Как установить абсолютный внутри div?

У меня возникла странная проблема с позиционированием набора div внутри другого div. Я думаю, что лучше всего описать это с изображением:

Внутри черного (#box) div есть два div (.a,.b), которые должны располагаться в одном и том же месте. То, что я пытаюсь достичь, изображено на первом изображении, второе - эффект, который я получаю. Похоже, если бы divs плавали без очистки или что-то еще, что явно не так. Любые идеи приветствуются!

Здесь код для этого примера:

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>

Ответ 1

Абсолютные divs выводятся из потока документа, поэтому содержащий div не имеет никакого содержимого, кроме заполнения. Дайте #box высоту, чтобы заполнить ее.

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

Ответ 2

Сначала все элементы уровня блока статируются в "документ". По умолчанию для всех элементов установлено значение position: static, что означает, что элемент не расположен и происходит там, где он обычно находится в документе. Обычно вы не указали это, если вам не нужно было переопределить ранее установленное позиционирование.
Относительная позиция: если вы укажете position: relative, вы можете использовать верхнюю или нижнюю часть, а также влево или вправо, чтобы перемещать элемент относительно того места, где оно обычно происходило в документе.
Когда вы указываете position: absolute, элемент удаляется из документа и помещается именно там, где вы говорите ему.

Итак, что касается вашего вопроса, вы должны поместить соответствующий относительный блок, т.е.

#parent {
  position: relative;
}

И дочерний элемент вы должны установить абсолютное значение в родительский элемент следующим образом:

#child {
  position: absolute;
}

Смотрите: Изучите позиционирование CSS в десяти шагах

Ответ 3

Проблема описана (в частности) в в этой статье.

#box относительно позиционируется, что делает его частью "потока" страницы. Ваши другие divs абсолютно позиционируются, поэтому они удаляются со страницы "поток".

Поток страниц означает, что позиционирование элемента влияет на другие элементы потока.

Другими словами, поскольку #box теперь видит dom,.a и .b больше не "внутри" #box.

Чтобы исправить это, вы хотели бы сделать все относительное, или все абсолютно.

Один из способов:

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

Ответ 4

Один из #a или #b должен быть не position:absolute, поэтому #box будет расти для его размещения.

Итак, вы можете остановить #a от position:absolute и по-прежнему позиционировать #b поверх него, например:

<style>
#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;
}
</style>
<div id="box">
    <div class="a">Lorem</div>
    <div class="b">Lorem</div>
</div>
<div id="after">Hello world</div>

(Обратите внимание, что я сделал ширины разными, поэтому вы можете видеть один за другим.)

Изменить после комментария Жюстина: тогда ваш единственный вариант - указать высоту #box. Это:

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

работает отлично, предполагая, что высоты a и b фиксированы. Обратите внимание, что вам нужно включить IE в стандартный режим, добавив doctype вверху вашего HTML

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

прежде чем это будет работать правильно.