Як видалити елемент з потоку?

83

Я знаю position: absolute, що витягне елемент із потоку, і він перестане взаємодіяти зі своїми сусідами.

Які ще способи цього можна досягти?

css

Ви маєте на увазі повністю видалити його зі сторінки або просто зробити невидимим? Що ви маєте на увазі під "взаємодією з сусідами?"

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

чого ти намагаєшся досягти?

— griegs

я просто думав, що є спосіб це зробити, і я не міг пригадати, тому звернувся до stackoverflow :) position: абсолютна робота, але мені було просто цікаво

— Присвячений

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

Що? Позиція не актуальна, якщо елемент навіть не відображається .

— Greg Hewgill

У Firefox повідомлення про перевірку вхідних даних display: noneз’являються у безглуздому місці (у верхній частині екрана, прикриваючи вкладки). Здається, непродемонстровані елементи справді без позиції, принаймні в цьому браузері.

— Brilliand

4

position: fixed;також "вискочить" елемент із потоку, як ви кажете. :)

position: absoluteповинен супроводжуватися позицією. напрtop: 1rem; left: 1rem

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

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

Це особливо корисно для заголовків із фіксованою позицією, які залишаються вгорі під час прокрутки, наприклад.

— Брайан Льюїс
джерело

3

Плаваючий він реорганізує потік, але положення: абсолютний - єдиний спосіб повністю видалити його з потоку документа.

— Сем Боулер
джерело

2

Я знаю, що цьому питанню кілька років, але що, на мою думку, ви намагаєтеся зробити, це отримати його так, коли великий елемент, як зображення, не заважає висоті div?

Я щойно натрапив на щось подібне, де хотів, щоб зображення переповнювало div, але я хотів, щоб воно було в кінці рядка тексту, тому я не знав, де воно опиниться.

Рішенням, яке я розібрав, було поставити поле внизу: -висота елемента, тож якщо зображення має висоту 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.

— Массімо
джерело