Position absolute z index не работает

z-index не работает даже при абсолютном позиционировании

Я пытаюсь создать рыбу, и ее задние плавники не уходят за ее телом, даже если я правильно настроил свойство z-index. Что в этом плохого? Я знаю, что могу использовать только z-index с позиционированными элементами. Что еще может повлиять на поведение свойств?

2 ответа

Вот мое решение,

По сути, мне пришлось изменить вашу структуру HTML. Проверьте фрагмент ниже

Это необходимо потому, что, во-первых,

Будет нарисовано на экране, а затем будет нарисовано тело рыбы

В вашем случае размещение плавников внутри блока тела рыбы сделало z-index бесполезным для размещения плавников позади рыбы.

В следующем примере z-index не требуется для размещения плавников сзади.

z-index для позиционированных элементов и transform сам по себе создают новый «контексты наложения «на элементы. Вот что происходит:

Ваш элемент .fish-body имеет значение transform , отличное от none, что дает ему собственный контекст стекирования.

Затем вы добавляете fins , который является потомком .fish-body . У этого дочернего элемента есть z-index: -1 , установка уровня стека fins в контексте стека для .fish-body Настройка z-index: -1 на fins не поместите его за .fish-body , потому что z-index имеет значение только в данном контексте стека.

Когда вы удаляете transform из .fish-body , он удаляет свой контекст наложения, в результате чего .fish-body и .fins совместно используют контекст наложения (контекст ) и создают << X5>> иди за .fish-body .

Index не работает в вашем случае, потому что мы не можем перезаписать z-index родительского div. Если мы хотим использовать z-index, тогда все элементы должны быть дочерними элементами одного и того же родителя, и мы также должны использовать позицию. Взгляните на следующий код и вывод.

Источник

Как мы решили проблемы с z-index

Буквально недавно на работе я получил баг с z-index , я его по быстрому пофиксил и получил еще два бага. Я как то не придавал этой проблеме значения, и тут мой коллега Дмитрий Рокало ревьювил мой очередной пул реквест и пришел ко мне с идеей, как покончить войну с z-index в нашем проекте. И как раз в тот же день, я слушал подкаст веб стандарты и там обсуждали статью по работе с z-index . И решение, которое предлагают в статье, показалось мне достаточно сложным по сравнению с тем, что предложил мне Дима. Поэтому я решил спонтанно записать это видео и написать статью. Возможно это решение кому-то будет полезным (Данная статья является расшифровкой видео).

Обрисуем ситуацию

Давайте рассмотрим пример. У нас при клике на иконку открывается попап или модальное окно или назовите его еще как угодно. Сейчас речь не про нейминг, но мы в проекте у себя называем это попапом. Этот попап всегда находится над основным контентом, поэтому мы дали всем попапам z-index: 100 , и это сработало.

В некоторых проектах, чтобы управлять z-index в одном месте, мы создавали отдельный файл с scss переменными.

Баги, конечно, возникали, но их было фиксить достаточно просто, когда в одном файле видишь всю картину проекта.

Последствия такого подхода

И спустя какое-то время у нас на проекте появился новый поповер. Когда нажимаешь на аватарку другого пользователя, открывается поповер с более подробной информацией о нем и возможностью заблокировать этого пользователя.

Если мы нажимаем на кнопку заблокировать пользователя, тогда появляется дополнительный попап, который спрашивает: «а вы уверены, что хотите заблокировать пользователя?»

И тут появился тот самый баг, который вы видите на экране. z-index попала 100, а z-index поповера 1000. Конечно же я сразу подшаманил, чтобы все работало, но это походило скорее на костыль.

Решение

В основе нашего решения лежит использование порталов. Давайте вспомним, что это такое:

Так сложилось, что когда мы создавали свой UiKit мы решили, что попап и поповер мы будем вставлять в проект через портал. Это было сделано для того, чтобы случайно какой-нибудь overflow: hidden не обрезал какую-либо важную часть. Я думаю многие сталкивались с этой проблемой.

Компонент

выглядит следующим образом. При первом рендере мы создаем

Один из ключевых моментов здесь, это то что мы помещаем каждый новый портал именно в конец какого-то контейнера в нашем случае это body .

Суть этой особенности, если вставить несколько

Компонент

Остается только использовать этот компонент

в UiKit компоненте

. Здесь мы оборачиваем весь контент компонентом

. А внутри вставляем

Компонент

Точно тоже самое мы делаем с компонентом

. Точно так же оборачиваем весь контент в

, далее оборачиваем в обработчик для обработки клика вне поповера и уже идет сам контейнер

от библиотеки react-popper . Который навешивает инлайн стилями position: absolute на наш

Вот и вся реализация

Проверим результат

Пример 1

Перейдем к первому примеру с иконкой. Мы нажимаем на иконку — открывается попап. Он как мы знаем добавился в конец body и имеет z-index: 1 , поэтому показывается поверх остального контента. Далее мы открываем меню пользователя, которое отображается в поповере и он точно так же, как и попап добавляется в конец body и т.к. позиция в DOM дереве у поповера ниже, поэтому он показывается поверх попапа.

Пример 2

С другой стороны, рассмотрим снова пример с аватаркой. Кликнем по аватарке, появится поповер и в конец body он так же добавился. Нажимаем кнопку заблокировать пользователя и видим попап уже не под поповером, а над поповером. Это произошло, потому что теперь попап в конце DOM дерева и поэтому у него позиция выше. И такой фокус работает при любом количестве разных типов компонентов вставляемых через

Подытожим

Суть данного подхода очень простая: какой элемент последний появился на экране, тот и показывается поверх всего. А если вам вдруг в каком то кейсе такая логика не подходит. Вы можете просто присвоить z-index: 2 . Хотя я сомневаюсь, что вам это понадобится. По крайней мере в нашем достаточно сложном проекте с 30+ попапов и столько же поповеров, вроде бы закрыло все кейсы. По крайней мере, пока никто не жалуется).

Источник

CSS z-index not working (position absolute) [duplicate]

I am trying to make the black div (relative) above the second yellow one (absolute). The black div ‘s parent has a position absolute, too.

9 Answers 9

This is because of the Stacking Context, setting a z-index will make it apply to all children as well.

You could make the two

I was struggling with this problem, and I learned (thanks to this post) that:

opacity can also affect the z-index

I was struggling to figure it out how to put a div over an image like this:

No matter how I configured z-index in both divs (the image wrapper) and the section I was getting this:

Turns out I hadn’t set up the background of the section to be background: white;

so basically it’s like this:

Just add the second .absolute div before the other .second div:

Because the two elements have an index 0.

use the relative div as wrapper and let the yellow div’s have normal positioning.

Only the black block need to have an absolute position then.

You have to put the second div on top of the first one because the both have an z-index of zero so that the order in the dom will decide which is on top. This also affects the relative positioned div because its z-index relates to elements inside the parent div.

Css stays the same.

I solved my z-index problem by making the body wrapper z-index:-1 and the body z-index:-2 , and the other divs z-index:1 .

And then the later divs didn’t work unless I had z-index 200+. Even though I had position:relative on each element, with the body at default z-index it wouldn’t work.

Источник

z-index | CSS

Чем больше значение z-index , тем выше находится элемент [w3.org].

z-index не работает с position: static; . Значения relative , absolute и fixed равнозначны

Пример: зелёный с z-index: 2; находится под красным z-index: 1; только когда имеет значение по умолчанию.

Если у соседних элементов одинаковое значение z-index , то нижние в коде теги показаны над верхними

[Пример интерактивный, следует переключать кнопки]

• красный:
• синий:
• зелёный:

▼ 0 auto auto 1 auto auto 1 1 1

У дочернего элемента родителя, имеющего z-index не auto и position , отличный от static , z-index предка можно представить целым числом, очерёдность предка — десятичным, а z-index потомка сотым

• красный:
• синий:
• зелёный:

▼ auto:auto 0:10 auto:auto 1:10 auto:5 1:10

Отрицательный z-index перемещает элемент перед background , border , box-shadow контекста наложения

Вложенные элементы отображаются над родителем. Единственный способ поместить дочерний тег ниже родителя — присвоить ему отрицательный z-index .

• контекст наложения:

▼ auto + + auto auto — 0 auto — 0 0 —

z-index и opacity

opacity меньше 1 рассматриваются как z-index: 0; . Если дополнительно задать position не static и z-index не auto , то положение измениться в соответствии с последними свойствами CSS.

• красный:
• синий:
• зелёный:

▼ auto:auto opacity:10 auto:auto 1:10 auto:5 1:10

Новый создаётся для элементов

2. с z-index не auto и position , отличным от static
3. opacity меньше 1
4. transform не none
5. will-change
6. и т.д. (здесь указан список)

Советы по использованию свойства z-index

1. Если можно не использовать z-index , то лучше его не использовать и, например, сразу в HTML коде разместить теги в требуемом порядке.
2. Если z-index всё же нужен, скажем, для выпадающего меню, то значений 0 , 1 , 2 , 3 , 4 , 5 вполне достаточно в большинстве случаев, не нужно переходить на десятки, а то и сотни.
3. Если z-index не работает, то нужно подняться вверх по дереву DOM, чтобы понять где контекст наложения.

Примечание: IE 6-7 рассматривает значение auto как 0 и всем position не static создаёт контекст наложения.

Источник

Position absolute z index не работает

Большинство CSS свойств просты для понимания. Зачастую, применения какого-либо из них к элементу разметки даёт немедленный результат — стоит только обновить страницу, как видно эффект применения. Однако, есть некоторые свойства, которые сложнее и будут работать только в случае определённых обстоятельств.

Свойство z-index относится ко второй группе, которое несомненно вызывает больше смятения, чем любое другое. По иронии, однако, при полном понимании того, что такое z-index, он очень прост в использовании и часто является эффективным способом преодоления многих проблем макета.

В этой статье, мы рассмотрим что такое z-index, какие есть проблемы в его понимании, а также обсудим некоторые примеры его использования. Также рассмотрим разницу его обработки браузерами, особенно в предыдущих версиях Internet Explorer и FireFox.

Так что же это за свойство?

Свойство z-index определяет уровень размещения в стеке, глубины html-элемента. «Уровень глубины» означает позицию элемента по оси Z (как перпендикулярную осям X и Y экрана). Чем больше значение z-index, тем элемент будет выше.

Естественное расположение элементов

На странице, обычное размещение элементов (я имею в виду расположение вдоль оси Z) определяется несколькими факторами. Ниже представлен список этих факторов, начиная с самых нижних элементов. В этом списке подразумевается, что ни одному из элементов явно не присваивается свойство z-index.

1. Фон и границы элемента, определяющего контекст стека.
2. Элементы с отрицательным контекстом стека, в порядке отображения.
3. Непозиционированные (position: static), а также без установленного свойства float (float: none) блочные элементы (display: block), в порядке отображения.
4. Непозиционированные, с установленным свойством float, блочные элементы, в порядке отображения.
5. Строчные (inline) элементы, в порядке отображения.
6. Элементы с установленным свойством position, в порядке отображения.

Корректное применение свойства z-index, может изменить естественное расположение в стеке.

Конечно, порядок элементов в стеке не очевиден, до тех пор пока не потребуется отобразить элементы один над другим. Поэтому, чтобы увидеть обычный порядок элементов, на примере ниже применены отицательные внешние отступы (margin).

У этих элементов разные цвета фона и границ, а последние два смещены за счёт установленного отрицательного свойства margin. Таким образом видно естественное размещение элементов, каждый следующий находится «выше» предыдущего. У этих элементов не установлено свойство z-index, их порядок размещения в стеке является естественным.

Где могут быть проблемы?

Давайте рассмотрим самую популярную проблему у начинающих разработчиков. Дело в том, что свойство z-index работает только с элементами, для которых свойство position установлено в absolute, fixed или relative.

Чтобы продемонстрировать это, выведем те же самые три элемента, но с установленным свойством z-index, чтобы попытаться изменить порядок расположения вдоль оси Z.

Установим серому элементу z-index равным 9999, синему — 500, а коричневому — 1. Логично ожидать, что порядок изменится. Но не в этом случае, поскольку свойство position по-умолчанию равно static.

Установим свойство position в relative и посмотрим что получилось:

А вот теперь у нас получился ожидаемый результат. Порядок элементов изменился, серый элемент находится над всеми, а коричневый в самом низу.

Синтаксис

Свойство z-index влияет как на блочные элементы, так и на строчные (inline). Значением может быть положительное или отрицательное число, либо значение по умолчанию — auto. Значение по умолчанию означает что элемент находится на том же уровне как и его родитель.

Ниже представлен CSS для третьего примера, где свойство z-index применяется корректно:

И снова повторюсь, специально для новичков в CSS: свойство z-index не будет работать, пока вы не установите свойство position.

Использование в javaScript

Вы можете повлиять на свойство z-index динамически, используя javaScript. Синтаксис похож на обычный для большинства CSS свойств, с использованием camel-нотации для замены дефиса в свойствах CSS.

Некорректная реализация в IE и FireFox

В некоторых случаях, в IE6, IE7 и FireFox 2, встречается неверная реализация свойства z-index.

Элемент select в IE6

В Internet Explorer 6, элемент select является windows-контролом, по этой причине он всегда отображается поверх всех элементов, игнорируя обычный порядок размещения, а также свойства position и z-index. Проблема показана на картинке ниже:

Элемент select находится в документе первым, его свойство z-index равно 1, а position установлен в relative. Div выводится после select, а его z-index равен «9999». Исходя из всего этого, div должен находится над select, как это происходит в других браузерах:

Если вы просматриваете эту статью не в IE6, вы увидите что div расположен выше select.

Эта ошибка IE6, является большой проблемой для выпадающих меню, когда они должны перекрывать элемент select. Решением может быть использование javaScript для того чтобы временно скрыть select-ы, а потом, после исчезновения меню, показать опять. Другим решением может быть использование iframe .

Позиционированные родители в IE6/IE7

Internet Explorer версий 6 и 7 некорректно сбрасывают контекст стека в отношении ближайшего позиционированного родителя. Чтобы продемонстрировать эту ошибку, мы опять отобразим два div-а. Но в этот раз мы обернём первый из них в позиционированный элемент.

У серого элемента z-index равен 9999, у синего — 1, оба элемента позиционированы. Поэтому, при корректной реализации, серый элемент отобразится поверх синего.

Если же вы откроете эту страницу в IE6 или IE7, вы увидите что синий элемент перекрывает серый. Это происходит по причине того, что серый элемент обёрнут в ещё один div, которому position установлен в relative.

Оба браузера «сбрасывают» контекст стека в относительно позиционированных элементах, хотя и не должны этого делать. У серого элемента z-index больше, чем у синего, поэтому он должен отображаться выше. С остальными браузерами такой проблемы нет.

Отрицательные значения в FireFox 2

В FireFox 2, элементы с отрицательным z-index находятся под контекстом стека, вместо того, чтобы быть над фоном и границами элемента, который формирует контекст стека. Пример вы можете увидеть на картинке:

Ниже представлена html-версия

Как видите, фон серого элемента (который формирует контекст стека) находится под синим, а текст (который является inline-элементом в сером элементе) находится над ним, что соответствует правилам естественного расположения, описанным выше.

Примеры использования

В оригинальной статье приведено много примеров использования свойства. Честно говоря мне лень это переводить, в основном — это скриншот, небольшой комментарий и ссылка. Если же всё-таки вам это действительно надо, то пишите, выделю время.

Кроме того, вы можете посмотреть как работает z-index здесь (взято отсюда )

Источник