2009-07-16 3 views
28

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

image

Внутри черного (#box) деление с есть две дивы (.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> 
+0

Whi ch jQuery pluging вы используете? Требуются ли варианты, которые позволят вам переписать его абсолютное позиционирование? Не могли бы вы изменить код плагина, чтобы изменить, как он работает? –

+0

Я использую jQuery Cycle Lite (http://malsup.com/jquery/cycle/lite/) - я мог бы редактировать код, просто нужно убедиться, что он все равно будет работать;) – Justine

+8

Изображение - это ошибка. Возвращает 404. На этот пост, возможно, был дан ответ, но ради того, чтобы помогать другим в будущем, вы должны оставить его доступным или, альтернативно, описать его словами. – hofnarwillie

ответ

24

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

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

Спасибо за подсказку. Проблема с высотой заключается в том, что она не нажимает «после» div вниз, просто закрывает ее. – Justine

+0

Он должен. См. Здесь: http://ejgejg.com/test/abs.html. Есть ли другие стили, применяемые после? – Emily

+0

Вы правы, это было просто плохо, спасибо! – Justine

6

Проблема описана (среди прочих) в this article.

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

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

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

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

Один из способов будет:

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

Спасибо, но дело в том, что это не мой выбор, чтобы использовать это позиционирование. Я использую плагин jQuery, который сделает a и b абсолютным. – Justine

+0

Вы можете сделать #box абсолютно позиционированным? Кроме того, jquery может изменить css этих элементов после запуска вашего плагина. –

+0

@TimHoolihan Если вы разместите абсолютно позиционированный элемент внутри относительно позиционированного элемента с соответствующим размером, он будет сидеть в нем отлично! посмотри на ответ Эмили. – GingerHead

6

Один из #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 PUBLIC "-//W3C//DTD HTML 4.01//EN" 
      "http://www.w3.org/TR/html4/strict.dtd"> 

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

+0

Спасибо. Но, как я уже сказал в комментарии к ответу Тима, я использую плагин jQuery, который сделает a и b абсолютным, поэтому не может сделать их не позиционированными. – Justine

+0

Да, в итоге я добавил высоту в #box. Благодаря! – Justine

+0

В чем смысл этого ответа, если вам нужно вручную установить высоту содержащего div? Что делать, если ваши дети имеют произвольную высоту? –

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

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

#parent { 
    position: relative; 
} 

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

#child { 
    position: absolute; 
} 

См.: Learn CSS Positioning in Ten Steps

+0

Этот пост только что сэкономил весь день - спасибо :) –

+0

@WillJohnson приветствую друга, вы можете посмотреть http://foundation.zurb.com действительно приятную легкую структуру, чтобы начать/работать с –

+0

@JimmyObonyoAbor Лучшее –

Смежные вопросы