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

Question 1

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

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

Question 2

Никто?

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

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

Question 3

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

jsFiddle

Question 4

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

Question 5

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

Question 6

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

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

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

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

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

Question 7

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

Question 8

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

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

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

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

например.

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

Question 9

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

float: right

Question 10

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

position: relative;
clear: both;

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

Answer 1

83

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

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

css Посвященный
источник

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

Джейсон Холл

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

griegs

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

Посвященный

1

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

Людовико

Answer 2

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

Джейсон Холл

Answer 3

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

griegs

Answer 4

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

Посвященный

Answer 5

1

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

Людовико

Answer 6

63

Никто?

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

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

Matchu
источник

4

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

bafromca

7

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

jstice4all

Answer 7

4

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

bafromca

Answer 8

7

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

jstice4all

Answer 9

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

jsFiddle

Answer 10

37

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

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

2

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

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

Answer 11

2

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

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

Answer 12

4

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

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

2

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

Дэн Хеберден

4

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

Грег Хьюгилл

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

Brilliand

Answer 13

2

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

Дэн Хеберден

Answer 14

4

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

Грег Хьюгилл

Answer 15

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

Brilliand

Answer 16

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

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

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

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

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

Answer 17

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

Answer 18

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

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

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

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

например.

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

Answer 19

1

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

float: right

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

Answer 20

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

position: relative;
clear: both;

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

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

Ответы: