CSS: альтернативный метод для абсолютного положения

Question

У меня есть следующая разметка:

<div id="playArea" style="position: relative;">
    <div style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div>
    <div 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 'playArea', но поскольку все div в playArea являются абсолютными, текст не отображается внизу последнего абсолютного позиционного div.

Я посмотрел на это и нашел альтернативу, используя float: left и clear: left, однако, после использования этого метода на первом div, вы не можете правильно расположить div, поскольку начальная точка второго div находится под первым div а не в (0,0). Любые идеи о том, как я могу получить это.

Спасибо

Answer 1

После прочтения цепочки комментариев между вами и «BalusC» кажется, что вы изменили свой CSS и теперь пытаетесь перемещать свои элементы и используете margin-top и margin-left для позиционирования. Вы полностью можете сделать это таким образом, но вы забываете, что вы также можете использовать отрицательные поля для позиционирования своих элементов. Например, если вы используете margin-top: -10px; , тогда он будет тянуть элемент вверх (вместо того, чтобы толкать его вниз, как обычное положительное значение маржи). То же самое касается всех ваших других полей.

Это, кажется, недостающий ингредиент для вас сейчас.

Answer 2

Но я бы хотел, чтобы абзац текста находился под div 'playArea', но, поскольку все div внутри playArea являются абсолютными, текст не отображается внизу последнего абсолютного позиционного div.

Поскольку вы, кажется, уже знаете все размеры и позиции, просто добавьте к нему еще один абсолютно позиционированный div и поместите в него относительное содержимое.

Я посмотрел на это и нашел альтернативу, используя float: left и clear: left, однако после использования этого метода на первом div, вы не можете правильно расположить div, поскольку начальная точка второго div находится под первый div и не в (0,0). Любые идеи о том, как я могу получить это.

Вам нужно удалить position: absolute, чтобы получить правильные значения. Достаточно ширины и высоты.

Answer 3

Переместите три внутренних элемента влево, поместите overflow: hidden; в элемент playArea и поместите <p> под тремя внутренними элементами с clear: both;

.

Answer 4

Если я правильно понял, вам просто нужно дать div "playArea" правильную высоту.

Редактировать: я имею в виду совокупную высоту всего внутри него.