«Правильный» способ сказать относительно смещенного div, что исходное место больше не занято

Question

Пока я вижу, когда я позиционирую элемент (например, flash player) относительно ранее размещенного изображения, как в примере

style="display: block; width:216px;height:164px; position: relative; top: -306px; left: 63px"

место, которое он намеревался использовать до этого, выглядит занято, т. Е. Следующий элемент будет показан ПОСЛЕ этого места. Но я должен сказать отрендеренному, что мне больше не нужно это место и что следующий элемент может быть отрендерен, как если бы относительно размещенный элемент вообще не появлялся.

Единственное решение, которое я нашел, - это обернуть содержимое во внешний div с размерами основного изображения и «overflow: hidden»

Есть ли лучший (или "правильный", как в названии) способ сделать то же самое?

Answer 1

Вы используете абсолютное позиционирование вместо относительного позиционирования, чтобы вывести элемент из потока.

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

Пример:

<div style="position:relative;">
   <div style="position:absolute;top:-306px;left:63px;">content...</div>
</div>

Answer 2

Относительно расположенная коробка сохраняет свои нормальный расход, включая линию перерывы и пространство изначально зарезервировано для этого.

Относительное позиционирование

Одним из способов является размещение дочернего элемента как абсолютно позиционированного внутри другого контейнера с установленным положением.