CSS: есть div после абсолютного позиционного div - PullRequest
Новая
       10

CSS: есть div после абсолютного позиционного div

10 голосов
/ 24 декабря 2009

Мне было интересно, как это сделать, моя текущая разметка выглядит следующим образом: 

<div id="playArea" style="position: relative;">
    <div id="widget1" class="widget" style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div>
    <div id="widget2" class="widget" style="position: absolute; left: 63px; top: 35px; width: 80px; height: 42px;">World</div>
    <div style="position: absolute; left: 534px; top: 329px; width: 183px; height: 251px;">Bye</div>
</div>

Теперь, если я создаю тег абзаца после последнего </div>, содержимое тега p не отображается под всеми этими тегами в браузере. Любые идеи, как я могу это сделать?

Спасибо, ребята

Ответы [ 4 ]

6 голосов
/ 24 декабря 2009

Если вы используете абсолютное позиционирование, но не знаете высоты того, что позиционируете, это проблема, которую HTML не очень хорошо решает. Я видел (и, вероятно, писал) хаки, где JavaScript используется для позиционирования элемента на основе offsetHeight другого.

Но вам может быть лучше использовать свойство CSS float вместо абсолютного позиционирования. float и clear довольно хороши для позиционирования вещей, как вы хотите, не жертвуя автоматическим потоком страниц.

2 голосов
/ 24 декабря 2009

Вам нужно будет присвоить playArea значение высоты, абсолютные div не расширят их родительский элемент

0 голосов
/ 10 февраля 2012

Поскольку абсолютно позиционированные элементы не «заполняют» поле элемента div playArea, высота и ширина, которые вы назначаете каждому дочернему элементу div, не увеличивают высоту и ширину playArea. Я не уверен, в чем заключительная проблема, которую вы пытаетесь решить, но из имен ваших идентификаторов вы пытаетесь расположить элементы в области «холста». Это хорошо.

Высота и ширина абсолютно позиционированных элементов div, опять же, не влияют на размеры элемента playArea, но зная высоты и ширины, вы можете указать playArea, какими должны быть его размеры. В этом случае, если указать playArea шириной 580 пикселей и высотой 785 пикселей, элемент p будет расположен правильно.

Снова выйдя из ваших разделителей, неплохо было бы явно определить размеры чего-то вроде playArea, где содержащиеся элементы не размечаются как обычные элементы страницы (абсолютно позиционированные или нет). Таким образом, вы получите более предсказуемый макет.

0 голосов
/ 24 декабря 2009

В этом случае div playArea не будет автоматически расширяться по ширине / высоте, чтобы соответствовать элементам внутри, и, поскольку высота не определена, он обрабатывается как не занимающий места (это означает, что тег

будет появляются в том же месте, что и div).

Если вы не знаете размеры div playArea перед рукой или они могут измениться, было бы лучше расположить ваши элементы, используя float, clear и margin, чтобы получить тот же самый макет, который вы получили в настоящее время.

Если вы еще этого не сделали, установите плагин Firebug для Firefox - это сделает вашу жизнь в CSS бесконечно проще, так как вы можете редактировать CSS и видеть изменения на лету. Не забудьте протестировать и в других браузерах.

Редактировать: Вот пример с поплавками (сделал это в спешке, поэтому может быть не идеальным) 

<div id="playArea" style="float: left;">
    <div id="widget2" class="widget" style="background-color: green; float: left; margin-left: 63px; margin-top: 35px; width: 80px; height: 42px;">World</div>
    <div id="widget1" class="widget" style="background-color: red; float: left; margin-left: 152px; margin-top: -1px; width: 313px; height: 269px;">Hello</div>
    <div style="background-color: blue; float: left; clear: left; margin-left: 534px; margin-top: 26px; width: 183px; height: 251px;">Bye</div>
</div>
<p style="clear: both; float: left;">Test P Element</p>
...