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

Question

Я знаю, что «position: absolute» вытолкнет элемент из «потока HTML / CSS», и он перестанет взаимодействовать с соседями. Какие еще способы можно достичь?

Answer 1

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

jsFiddle

Answer 2

Отсутствует

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

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

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

Answer 6

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

Answer 7

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

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

Решение, которое я нашел, состояло в том, чтобы поместить поле margin-bottom: -element height, поэтому, если изображение имеет высоту 20px,

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

например.

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

Answer 8

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

position: relative;
clear: both;

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