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

Z-индекс не работает с фиксированным позиционированием

У меня есть div с позиционированием по умолчанию (т.е. position:static ) и div с fixed позицией.

Если я установлю z-индексы элементов, кажется невозможным заставить фиксированный элемент идти позади статического элемента.

Я могу обойти это, используя position:absolute статический элемент, но кто-нибудь может сказать мне, почему это происходит?

(Похоже, что этот вопрос похож на этот вопрос, ( Fixed Positioning нарушает z-index ), но он не имеет удовлетворительного ответа, поэтому я задаю этот вопрос здесь с моим примером кода)

Этот вопрос может быть решен несколькими способами, но на самом деле, знание правил суммирования позволяет вам найти лучший ответ, который работает для вас.

Решения

Элемент вашего единственного штабелирования контекст, так что просто следуйте штабелирование правил внутри контекста стэк , и вы увидите , что элементы уложены в указанном порядке

1. Корневой элемент стекового контекста ( в данном случае это элемент)
2. Позиционированные элементы (и их дочерние элементы) с отрицательными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковым значением располагаются в соответствии с внешним видом в HTML)
3. Непозиционированные элементы (упорядоченные по внешнему виду в HTML)
4. Позиционируемые элементы (и их дочерние элементы) со значением z-index auto (упорядочены по внешнему виду в HTML)
5. Позиционированные элементы (и их дочерние элементы) с положительными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковым значением располагаются в соответствии с внешним видом в HTML)

Так что вы можете

1. установите z-индекс -1, для #under позиционированного -ve z-индекс появится позади непозиционированного #over элемента
2. установить положение , #over чтобы relative таким образом , что правило 5 относится к нему

Настоящая проблема

Разработчики должны знать следующее, прежде чем пытаться изменить порядок расположения элементов.

1. Когда складывается контекст
   • По умолчанию этот элемент является корневым элементом и является первым стековым контекстом.
2. Порядок наложения в контексте наложения

Когда складывается контекст

• Когда элемент является корневым элементом документа ( элемент)
• Когда элемент имеет значение позиции, отличное от static, и значение z-index, отличное от auto
• Когда элемент имеет значение непрозрачности меньше 1
• Несколько новых свойств CSS также создают контексты стека. К ним относятся: преобразования, фильтры, css-регионы, постраничный носитель и, возможно, другие. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
• Как правило, кажется, что если свойство CSS требует рендеринга в внеэкранном контексте, оно должно создавать новый контекст стека.

Порядок наложения в контексте наложения

1. Корневой элемент стекового контекста (по умолчанию этот элемент является единственным стековым контекстом, но любой элемент может быть корневым элементом для стекового контекста, см. Правила выше)
   • Вы не можете поместить дочерний элемент за корневой контекстный элемент стека
2. Позиционированные элементы (и их дочерние элементы) с отрицательными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковым значением располагаются в соответствии с внешним видом в HTML)
3. Непозиционированные элементы (упорядоченные по внешнему виду в HTML)
4. Позиционируемые элементы (и их дочерние элементы) со значением z-index auto (упорядочены по внешнему виду в HTML)
5. Позиционированные элементы (и их дочерние элементы) с положительными значениями z-index (более высокие значения располагаются перед более низкими значениями; элементы с одинаковым значением располагаются в соответствии с внешним видом в HTML)

Источник

Z-index не работает для вложенного элемента относительно родительского

Здравствуйте, опишу проблему, допустим имеется простая компоновка:

Несмотря на то что у родителя z-index:50000, дочерний div все равно получается выше родительского:

Как можно сделать дочерний div под родительским? В реальном проекте реализовываю навигацию и вот пример на http://jsfiddle.net/mhAA3/, когда наводишь на ссылку дочерний блок выползает НАД родителем

Размеры элемента относительно родительского
Как дочернему элементу задать размеры родительского? Буду благодарен за толковый ответ

Обновить Source для вложенного элемента
Есть класс окна. В нём есть Grid и в нём есть Image. Source картинки привязан к свойству в классе.

Размер родительского элемента для
Здравствуйте, никак не могу понять, как задать размер родительского блока для

Проблему решил, нужна дополнительная обертка маскирующая fixed-слой:

Маска-слой не нужна.

Комментарий администратора

Правила форума пункт 5.19 Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме. Ссылка на песочницу — это бонус.

Решение

Всем спасибо за ответы, возможно я как то неверно высказался в первом посте, но мне нужно было чтобы дочерний блок с position:absolute (зеленый) оказался ПОД родительским с position:fixed (красный). Как я понял из сообщения MVS76 родитель должен быть relative, и действительно, если поменять в первом посте fixed на relative и убрать z-index я достигаю нужного эффекта:

Проблема была в том, что мне именно нужен position:fixed для родителя, т.к. в реальном проекте он отвечает за навигацию, зафиксированную сверху

Источник

Как мы решили проблемы с 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+ попапов и столько же поповеров, вроде бы закрыло все кейсы. По крайней мере, пока никто не жалуется).

Источник

4 причины, по которым ваш z-index CSS не работает (и как это исправить)

Дата публикации: 2019-05-28

От автора: Z-index — это свойство CSS, которое позволяет размещать элементы в слоях друг над другом. Это супер полезно, и, честно говоря, очень важно знать, как использовать в CSS этот инструмент. К сожалению, z-index является одним из тех свойств, которые не всегда ведут себя интуитивно. Сначала это кажется простым — более высокий номер z-индекса означает, что элемент будет поверх элементов с более низкими номерами z-index.

Но есть некоторые дополнительные правила, которые усложняют ситуацию. И вы не всегда можете исправить положение, установив z-index 999999! В этой статье подробно объясняются четыре наиболее распространенных причины, по которым z-index CSS не работает, и как именно вы можете это исправить.

Мы рассмотрим некоторые примеры кода. Прочитав эту статью, вы сможете избегать этих распространенных ошибок с z-index! Давайте рассмотрим первую причину, по которой не срабатывает свойство:

1. Элементы в том же контексте стека будут отображаться в порядке их указания, причем последние элементы будут располагаться поверх предыдущих

В первом примере у нас есть относительно простой макет, который включает в себя 3 основных элемента:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Белый блок с текстом

Еще одно изображение того же кота

В этом макете в идеале нам нужно, чтобы белый блок текста был поверх обоих котов. Чтобы попытаться достичь этого, мы добавили в CSS некоторые отрицательные поля для обоих изображений кошек, чтобы они немного перекрывали белый блок:

Тем не менее, это выглядит так:

Первый кот действительно расположен под белым блоком контента, как мы и хотим. Но второе изображение кота расположено поверх текста!

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

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

В нашем примере с кошками и белым блоком они подчиняются этому правилу. Вот почему первый кот находится под элементом белого блока, а белый блок под вторым котом.

Хорошо, с порядком размещения мы разобрались, но как нам исправить CSS, чтобы второй кот находился под белым блоком? Давайте рассмотрим вторую причину:

2. Для элемента не задана позиция

Одно из указаний, определяющих порядок наложения, заключается в том, установлена ли позиция для элемента или нет. Чтобы установить позицию для элемента, добавьте свойство CSS position с каким-либо значением, кроме static, например, relative или absolute.

Согласно этому правилу позиционируемые элементы будут отображаться поверх непозиционированных элементов. Таким образом, установив для белого блока position: relative, и оставив два элемента котов не позиционированными, вы поместите белый блок поверх котов в порядке расположения. Вот как это будет выглядеть — вы также можете поэкспериментировать с Codepen выше.

Юху! Теперь, следующее, что мы хотим сделать, это повернуть нижнюю кошку вверх ногами, используя свойство transform. Таким образом, обе кошки окажутся под белым блоком, с торчащими из-под него головами. Но это может вызвать еще большую путаницу с z-index. Мы рассмотрим проблему и решение в следующей части.

3. Установка некоторых свойств CSS, таких как opacity или transform, помещает элемент в новый контекст стека

Как мы только что упомянули, мы хотим перевернуть нижнюю кошку вверх ногами. Для этого мы добавим transform: rotate(180deg).

Источник