Объясняем Z-index: как позиционировать элементы с помощью CSS
CSS свойство под названием z-index всегда вызывало у меня страдания.
На первый взгляд принцип его работы звучит просто: элементы с более высоким значением z-index отображаются поверх элементов с низким z-index. Тем не менее, я часто терпела фиаско, потому что на деле оказывалось, что это правило совершенно не работает.
Наконец я решила, что прошла уже достаточно длинный путь проб и ошибок и что пора наконец основательно изучить этот вопрос. Я надеюсь, что эта статья поможет и вам разобраться, почему свойство z-index может работать не так, как ожидается.
Положение элементов по умолчанию
Для начала давайте разберемся с тем, как браузер по умолчанию позиционирует элементы, когда не указаны значения z-index:
- Корневой элемент (элемент <html>)
- Непозиционируемые элементы в том порядке, в котором они определены
- Позиционированные элементы в том порядке, в котором они определены
Непозиционируемый элемент — это элемент со значением position: static по умолчанию. Позиционируемый элемент представляет собой элемент с любым другим значением свойства position. Примерами других значений являются: absolute (абсолютное), relative (относительное), sticky(приклеенное) или fixed (фиксированное).
Мы определили зеленый квадрат в конце документа. Тем не менее, он появляется не впереди, а позади всех остальных элементов, потому что у него не задано позиционирование.
Позиционирование с применением z-index
Если теперь мы хотим изменить порядок расположения элементов, мы можем использовать CSS-свойство z-index. Элемент с более высоким z-индексом будет отображаться перед элементом с более низким z-индексом. Следует отметить, что z-индекс работает только с позиционируемыми элементами.
Перед синим квадратом отображается оранжевый квадрат, потому что он имеет более высокий z-index.
Контекст наложения (stacking order)
Предположим, что мы добавили еще один позиционированный квадрат в макет, который мы хотим разместить за розовым квадратом. Мы обновляем наш код, чтобы он выглядел следующим образом:
Наш розовый квадрат отображается перед фиолетовым, как и ожидалось, но что же случилось с оранжевым квадратом? Почему он внезапно оказался за синим, хотя у него более высокий z-индекс? Это связано с тем, что добавление значения z-индекс в элемент формирует то, что называется контекстом наложения.
Розовый квадрат имеет значение z-index, отличное от auto, что создает новый контекст наложения. Появление контекста наложения влияет на то, как отображаются дочерние элементы.
Можно изменить порядок наложения дочерних элементов розового квадрата. Однако их z-индекс имеет смысл только в контексте наложения. Это означает, что мы не сможем расположить оранжевый квадрат перед синим, потому что они находятся в разных контекстах наложения.
Если мы хотим, чтобы синий и оранжевый квадраты были частью одного и того же контекста наложения, мы можем сделать синий квадрат дочерним элементом розового квадрата. Это переместит синий квадрат за оранжевый.
Контекст наложения формируется не только при применении свойства z-index. Существует несколько других свойств, которые заставляют элементы создавать контексты наложения. Некоторые примеры: filter (фильтр), opacity (непрозрачность), and transform (трансформация).
Вернемся к нашему предыдущему примеру. Синий квадрат снова связан с розовым. На этот раз вместо добавления свойства z-index розовому квадрату мы применим к нему фильтр.
Оранжевый квадрат по-прежнему имеет более высокий z-индекс, чем синий, но по-прежнему отображается позади него. Это связано с тем, что значение фильтра заставило розовый квадрат создать новый контекст наложения.
Резюме
Используя z-индекс для позиционируемых элементов, мы можем изменить порядок наложения элементов, заданный по умолчанию.
При применении определенных CSS-свойств элемент может формировать контекст наложения. Значения z-индекса имеют смысл только в одинаковом контексте наложения.
Для получения дополнительной информации о принципе работы свойства z-index, рекомендую вам ознакомиться с этой статьей. Именно она вдохновляла меня в процессе работы над этой публикацией.
Почему не работает z-index?
Имеется блок:
<div ></div>
Стили для него:
По идее красный блок должен перекрывать синий?
- Вопрос задан более года назад
- 367 просмотров
- Вконтакте
А у вас «не работает», потому что z-index работает совсем не так, как вам хочется.
https://habr.com/ru/post/166435/
css.yoksel.ru/kontekst-nalozheniya
и т.д.
- Вконтакте
Нет. Любое отличное от static.
И еще в гридах.
Ну что ж. Давайте читать вместе.
У родителя не статик и не авто у z-index.
Могут быть.
Но при этом они могут не иметь никакого отношения вашему блоку. А могут и иметь.
Не понравились эти статьи, нагуглите любые другие про контекст наложения и z-index.
Pro_Code, вы перечислили всего два из четырех возможных значения position и ничего не сказали о гридах.
Наверное, и вы и я понимаем, что вы хотели сказать.
Но этот сайт читают и совсем новички тоже. Из вашей фразы они могут сделать неверный вывод. И смешно им не будет. Тем, кто будет работать потом с их кодом, вероятно, тоже. Так что давайте постараемся аккуратнее относится к формулировкам. Тем более, что z-index и так тема сложная.
Ankhena, по факту хотелось сделать что-то вроде такой штуки(отсюда и возник вопрос о расположении блоков): 
Код прилагаю:
Штука адаптивная к тексту. Проблема решена при помощи — transform-style: preserve-3d — у блока, и transform: translateZ(-1px) — у псевдоэлемента блока.
Pro_Code,
Безопасный вариант, при котором рамка не наедет на другие элементы и не уедет за край окна. Все элементы остаются в потоке, не меняют контекст наложения и вообще всё прекрасно.
В современном мире многие задачи стали решаться без абсолютов.
В вашем варианте padding 40px может не компенсировать ушки рамки. Не забудьте поправить.
Но это уже не про z-index и вообще не про то, как он работает.
Не работает Z-index в CSS? Концептуальное понимание
У вас не работает z-index в css ? Возможно вы просто не до конца понимаете его работу. Надеюсь, эта статья вам поможет.
Всё работает, просто нужно понять концепцию html страницы. Постараюсь кратко.
Давайте представим весь html документ, как государство, в котором действует один единственный закон. Закон порядка расположения граждан (элементов).
Закон гласит — элементы на странице располагаются в той последовательности, в которой написаны в документе. Сверху вниз. И каждый последующий элемент будет располагаться поверх предыдущего. Иерархия.
Вот и весь закон. Это дефолтное правило расположения элементов в html и точка.
Но, как всегда, есть граждане, которые не соблюдают закон и выбиваются из общего строя.
Виды преступлений, из-за которых граждане становятся вне закона:
- различные свойства позиционирования position:absolute/relative (кроме static ),
- свойства трансформации, масштабирования, растягивания ( transform ),
- и даже свойства непрозрачности opacity .
В итоге, получаем шайку головорезов, для которой закон не писан. Но ими ведь тоже надо как-то управлять?
Вот для них и был придуман z-index . Для всех тех, кто выбился из общей стаи.
И если у элемента есть хотя бы одно свойство из перечисленных выше, то он автоматически попадает в отряд зэдиндексных (вне закона).
Почему я провел именно такую аналогию. Потому что во многих статьях говорится о том, что z-index работает только для явно позиционируемых элементов. Но это не совсем так. Он работает для всех тех, кто выбился из дефолтного порядка позиционирования. А выбивают их из общего порядка не только свойства явного позиционирования, но те, что я перечислил выше.
Но если всё равно не срабатывает z-index и не получается вывести элемент поверх остальных, то проверьте его вложенность. Возможно его ограничивает родительский зэдиндексный элемент.
А z-index дочернего элемента не может быть сильнее родительского z-index и работает только в рамках своего родителя. Значит нужно либо вытащить нужный элемент из-под крыла родителя (переверстать страницу), либо сделать родителя законопослушным дефолтному порядку расположению html (убрать свойства, которые делают его зэдиндексным). Тогда дочерний элемент, даже находясь в родителе, сможет бороться с другими, т.к. батька ушел из ранга зэдиндексных и не преграждает ему путь.
Why your z-index isn't working
I was building a sidebar recently, and I encountered a bug where the content of the page was always on top of the mobile navbar no matter how high I raised the z-index of the sidebar. This took me a while to figure out and I’m writing this article hoping that someone out there won’t waste a lot of time like I did trying to solve the bug.
What is z-index
z-index is a CSS property that allows you to set the stacking order of positioned elements in the DOM. Here’s how to specify the z-index from your CSS:
Exit fullscreen mode
When no z-index is set, the stacking order follows the appearance
of the elements in the DOM.
I set the z-index correctly, so why doesn’t it work?
The z-index of an element depends on a number of things, and usually, when these conditions aren’t met, the z-index of your element would most likely not take effect.
Here are some of the reasons why your z-index doesn’t work;
You set z-index on a static element
By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won’t work.
A ridiculously large z-index was previously set
You might be working on an existing codebase that had the z-index of an element set to 999 (for example). This would affect the stacking order as only an element with a higher z-index can show on top. So you would need to set the z-index of at least 1000 for the z-index to work. Also, it’s good practice to avoid setting large z-index values, that way you can avoid issues such as this.
The parent element has a lower z-index
The z-index of an element can only go as far as the maximum z-index of its parent (it cannot appear in a higher stacking context than its parent). Take for example;
Exit fullscreen mode
In this case, you want to display the child element over the element-to-cover element so you set the z-index to 3. This should work since it has a z-index higher than the element-to-cover , but because the parent element has a z-index of 1, the child element would not appear above the element-to-cover