Как удалить элемент из потока HTML/CSS?

Ответ 1

Не

Я имею в виду, кроме как полностью удалить его из макета с помощью display: none, я уверен, что он.

Вы сталкиваетесь с конкретной ситуацией, в которой position: absolute не является жизнеспособным решением?

Ответ 2

Один трюк, который делает position:absolute более приятным для меня - сделать его родительский position:relative. Тогда ребенок будет "абсолютным" относительно положения родителя.

jsFiddle

Ответ 3

Другой вариант - установить height: 0; overflow: visible; в элемент, хотя он не будет действительно за пределами потока и, следовательно, может сломать разворот маржи.

Ответ 4

Там display: none, но я думаю, что это может быть немного больше, чем вы ищете.

Ответ 5

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

Ответ 6

position: fixed; также будет "выталкивать" элемент из потока, как вы говорите.:)

position: absolute должно сопровождаться положением. например top: 1rem; left: 1rem

position: fixed, однако, поместит элемент, где он обычно будет отображаться в соответствии с потоком документа, но не позволит ему двигаться после этого. Он также эффективно устанавливает высоту в 0px (относительно dom), так что следующий элемент сдвигается над ней.

Это может быть довольно круто, потому что вы можете установить position: fixed; z-index: 1 (или любой нужный вам z-индекс), чтобы он "выскакивал" над следующим элементом.

Это особенно полезно для фиксированных заголовков позиций, которые остаются наверху при прокрутке, например.

Ответ 7

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

Я просто столкнулся с чем-то похожим, где мне нужно, чтобы изображение переполняло div, но я хотел, чтобы это было в конце строки текста, поэтому я не знал, где это будет.

Решение, которое я выяснил, это установить высоту поля: высота элемента, поэтому, если изображение имеет высоту 20 пикселей,

margin-bottom: -20px; vertical-align: top;

например.

Таким образом, он перемещался по внешней стороне div и оставался рядом с последним словом в строке.

Ответ 8

Для полноты картины: Свойство float также удаляет элемент из потока HTML, например

float: right

Ответ 9

Попробуйте использовать это:

position: relative;
clear: both;

Я использую его, когда не могу использовать абсолютную позицию, например, при печати, когда вы используете page-break-after: always;, работает только с position:relative.