Как разместить абсолют внутри 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>

css positioning
person Justine    schedule 16.07.2009    source источник
comment
Какой плагин jQuery вы используете? Требуются ли параметры, которые позволят вам перезаписать его абсолютное позиционирование? Не могли бы вы отредактировать код плагина, чтобы изменить его работу?   -  person Sam Hasler    schedule 16.07.2009
comment
Я использую jQuery Cycle Lite (malsup.com/jquery/cycle/lite) - Я мог бы отредактировать код, просто нужно убедиться, что он все еще работает;)   -  person Justine    schedule 16.07.2009
comment
Изображение — чушь. Возвращает 404. Возможно, на этот пост был дан ответ, но ради помощи другим в будущем вы должны оставить его доступным или, альтернативно, описать его словами.   -  person hofnarwillie    schedule 05.09.2012
comment
для изображения: goo.gl/9FbqEZ   -  person niraj.nijju    schedule 05.03.2014

Ответы (4)


arrow_upward
36
arrow_downward

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

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
    height:30px;
}
person Emily    schedule 16.07.2009
comment
Спасибо за совет. Проблема с высотой заключается в том, что она не опускает последующий элемент div, а просто закрывает его. - person Justine; 16.07.2009
comment
Должно. См. здесь: ejgejg.com/test/abs.html Используются ли какие-либо другие стили после ? - person Emily; 16.07.2009
comment
Это то, что я бы назвал грязным взломом. Я считаю, что ответ @RichieHindle - это тот, с которым нужно идти: позиция родительского блока: относительная, позиция внутреннего блока: абсолютная. Работает просто отлично. - person conradkleinespel; 04.02.2013

arrow_upward
53
arrow_downward

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

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

#parent {
  position: relative;
}

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

#child {
  position: absolute;
}

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

person Jimmy Obonyo Abor    schedule 11.09.2012
comment
@WillJohnson, добро пожаловать, приятель, вы можете посмотреть на foundation.zurb.com действительно хороший простой фреймворк для начала / работы. - person Jimmy Obonyo Abor; 30.11.2015
comment
@JimmyObonyoAbor Самый лучший - person Ayman Salah; 03.03.2017

arrow_upward
7
arrow_downward

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

#box расположен относительно, что делает его частью «потока» страницы. Другие ваши элементы div абсолютно позиционированы, поэтому они удаляются из «потока» страницы.

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

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

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

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

.a {
   position:relative;
   margin-top:10px;
   margin-left:10px;
   background-color:red;
   width:210px;
   padding: 5px;
}
person Tim Hoolihan    schedule 16.07.2009
comment
Спасибо, но дело в том, что это не мой выбор - использовать такое позиционирование. Я использую плагин jQuery, который сделает a и b абсолютным позиционированием. - person Justine; 16.07.2009
comment
Вы можете сделать #box абсолютно позиционированным? Кроме того, jquery может изменить CSS этих элементов после запуска вашего плагина. - person Tim Hoolihan; 16.07.2009
comment
@TimHoolihan Если вы поместите абсолютно позиционированный элемент внутри относительно позиционированного элемента соответствующего размера, он будет в нем идеально сидеть! посмотрите на ответ Эмили. - person GingerHead; 17.04.2012

arrow_upward
7
arrow_downward

Один из #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>

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

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

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

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

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

до этого работает нормально.

person RichieHindle    schedule 16.07.2009
comment
Спасибо вам. Но, как я сказал в комментарии к ответу Тима, я использую плагин jQuery, который сделает a и b абсолютным позиционированием, поэтому не могу сделать их непозиционированными. - person Justine; 16.07.2009
comment
Да, в итоге я добавил высоту к #box. Спасибо! - person Justine; 16.07.2009
comment
В чем смысл этого ответа, если вам нужно вручную установить высоту содержащего div? Что делать, если ваши дети имеют произвольный рост? - person Distortum; 07.11.2015