Как убрать элемент из потока?

83

Я знаю, position: absoluteчто вытолкнет элемент из потока, и он перестанет взаимодействовать со своими соседями.

Какие еще есть способы добиться этого?

css

Вы имеете в виду полностью удалить его со страницы или просто сделать невидимым? Что вы имеете в виду под «взаимодействием со своими соседями»?

— Джейсон Холл

чего ты пытаешься достичь?

— griegs

Я просто подумал, что есть способ сделать это, и я не мог вспомнить, поэтому я обратился к stackoverflow :) position: absolute работает, но мне просто интересно

— Посвященный

1

Полезный ответ: stackoverflow.com/a/11917186/11298742

— Людовико

63

Никто?

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

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

— Matchu
источник

4

position: absoluteвызывает перерисовку при прокрутке, что плохо для производительности на мобильных устройствах

— bafromca

7

Это не тот ответ, который ожидает получить пользователь, приходя сюда, поскольку в заголовке написано «удалить из потока». display: noneполностью удаляет элемент не только из потока.

— jstice4all

118

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

jsFiddle

— Джо Флинн
источник

37

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

— пользователь
источник

2

@Jessica, используйте псевдоэлемент ::beforeс абсолютным позиционированием для имитации фона.

— пользователь

4

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

— Грег Хьюгилл
источник

2

Но даже в этом случае он все еще находится «по соседству» ... абсолютное положение относительно тела - единственный способ полностью контролировать его положение. Имейте в виду, что если его родительский элемент объявлен как относительный, тогда его абсолютное происхождение относительно него - в этом случае вам нужно будет добавить элемент в document.body или нерелятивный объявленный элемент.

— Дэн Хеберден

4

Какая? Позиция не имеет значения, если элемент даже не отображается .

— Грег Хьюгилл

В Firefox сообщения проверки для входов с помощью display: noneпоявляются в бессмысленном месте (вверху экрана, закрывая вкладки). Кажется, что неотображаемые элементы действительно беспозиционны, по крайней мере, в этом браузере.

— Brilliand

4

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

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

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

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

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

— Брайан Льюис
источник

3

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

— Сэм Боулер
источник

2

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

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

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

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

например.

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

— Джереми Миллер
источник

1

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

float: right

— воздух5
источник

-1

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

position: relative;
clear: both;

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

— Массимо
источник