Не работает z index – четыре возможные причины возникновения проблемы

Содержание

Как работает z-index | CSS

На самом деле элементы внутри HTML-документа генерируются в трех измерениях. Кроме привязки к осям X и Y их также можно размещать по оси Z. Для этого для элемента должно быть установлено CSS position relative или другие значения данного свойства:

Такие свойства, как margin, float и offset отвечают за то, где элемент будет располагаться на осях х и y, в то время как за расположение на оси z отвечает свойство z-index.

Это свойство позволяет определить:

Расположение текущего элемента в стеке;
Определяет ли текущий элемент новый контекст наложения (stacking level).

Это свойство применимо исключительно к элементам с установленным позиционированием. То есть, свойство position элемента должно быть установлено как relative, absolute или fixed. У свойства z-index имеется три значения:

Значение	Описание
auto	Устанавливает уровень стека на 0, и не создает новый стек.
<integer>	Устанавливает уровень стека на целое число, и создает новый стек.
inherit	Устанавливает позиционирование относительно родительского элемента и создает новый стек.

z-index: auto | <integer> | inherit

Это значение определяет, где именно на оси Z находится элемент. Чем больше число, тем выше элемент будет в стеке и к «поверхности» экрана:

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

Кроме свойства z-index на position relative CSS элемента в стеке также влияет несколько факторов. Элементы располагаются в стеке в следующем порядке:

Позиция	Описание	CSS-код
1 (bottom)	Элемент формирует контекст наложения.	z-index: <integer>
2	Дочерние элементы с отрицательным уровнем стека.	z-index: <negative integer> position: relative \| absolute \| fixed
3	Дочерние элементы со стилизацией In-flow, non-inline или без установленного позиционирования.	display: /* not inline */ position: static
4	Плавающие дочерние элементы без установленного позиционирования.	float: left \| right position: static
5	Дочерние элементы со стилизацией In-flow inline или без выставленного позиционирования.	display: /* inline */ position: static
6	Дочерние элементы с 0 уровнем стека.	z-index: auto \| 0 position: relative \| absolute \| fixed
7 (top)	Дочерние элементы с положительным уровнем стека.	z-index: <positive integer> position: relative \| absolute \| fixed

При указании CSS position relative z index мы не всегда определяем ее относительно всех остальных элементов на странице. Уровень элемента в стеке отражает лишь его позицию в рамках отдельного контекста наложения.

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

Контекст наложения можно объяснить следующими правилами:

Исходный контекст наложения в любом HTML-документе заключен в корневом элементе <html>. До тех пор, пока не создано новых контекстов, уровень элемента в стеке будет по умолчанию относиться ко всем элементам на странице.

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

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

В приведенном ниже примере .foo относится к контексту наложения 1, а .bar – к контексту наложения 2:

Если у родительского элемента имеется установленный CSS position relative z index, то все дочерние элементы не могут располагаться над или под этим уровнем (в рамках контекста наложения родительского элемента). В приведенном ниже примере, несмотря на то, что у .bar значение z-index выше, чем у .baz, этот элемент все равно расположен “под” ним. Так происходит потому, что в контексте 1 .bar не может располагаться выше или ниже уровня 1.

CSS
.foo { z-index: 1; }
.bar { z-index: 1000; }
.baz { z-index: 2; }

Данная публикация представляет собой перевод статьи «How z-index Works» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

z-index не работает с фиксированным позиционированием — css

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

Элемент <html> — это ваш единственный контекст стекирования, поэтому просто следуйте правилам стекирования в контексте стекирования, и вы увидите, что элементы сложены в этом порядке

Корневой элемент контекста контекста (элемент <html> в этом случае)
Позиционированные элементы (и их дочерние элементы) с отрицательными значениями z-индекса (более высокие значения складываются перед более низкими значениями, элементы с одинаковым значением складываются в соответствии с внешним видом в HTML)
Непоставленные элементы (упорядоченные по внешнему виду в HTML)
Позиционированные элементы (и их дочерние элементы) с z-индексом значения auto (упорядочены по внешнему виду в HTML)
Позиционированные элементы (и их дочерние элементы) с положительными значениями z-индекса (более высокие значения складываются перед более низкими значениями, элементы с одинаковым значением складываются в соответствии с внешним видом в HTML)

Итак, вы можете

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

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

Когда создается контекст укладки
- По умолчанию элемент <html> является корневым элементом и является первым контекстом стекирования
Порядок укладки в контексте стекирования

Ниже перечислены правила контекста укладки и стекирования из этой ссылки

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

Порядок элементов:

Корневой элемент контекста стекирования (элемент <html> по умолчанию является единственным стекирующим контекстом, но любой элемент может быть корневым элементом для контекста стекирования, см. правила выше)
- Нельзя поместить дочерний элемент за элемент контекста корневого стека
Позиционированные элементы (и их дочерние элементы) с отрицательными значениями z-индекса (более высокие значения складываются перед более низкими значениями, элементы с одинаковым значением складываются в соответствии с внешним видом в HTML)

Непоставленные элементы (упорядоченные по внешнему виду в HTML)
Позиционированные элементы (и их дочерние элементы) с z-индексом значения auto (упорядочены по внешнему виду в HTML)
Позиционированные элементы (и их дочерние элементы) с поло

qaru.site

Как на самом деле работают z-index / Habr

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

Возможно, информация, которую я расскажу ниже, на самом деле тривиальна. Однако я уверен, что многие найдут её для себя полезной. Те же, кто уже о ней знал, смогут использовать данный текст как шпаргалку в трудную минуту. Итак, добро пожаловать под кат.

На самом деле человек обычно начинает пытаться разобраться в какой-то новой для себя области в трёх случаях: если встречает неожиданные результаты при работе и не понимает, что происходит; если встаёт потребность выйти за рамки и взглянуть на предмет под другим углом; и наконец, просто из спортивного интереса.

Мой случай явно не относится к третьей категории. Сначала я несколько раз в жизни сталкивался с первым сценарием при работе над разными проектами; однако до конца так и не разбирался в вопросе из-за лени и отсутствия наглядных и понятных материалов с примерами. А затем в начале этого года начал писать веб-движок, что заставило начать читать стандарты и вообще смотреть, как работают разные нетривиальные вещи в популярных браузерах, и главное, почему они работают именно так.

Начнём с простого. Что такое z-index и для чего он нужен?

Очевидно, что это координата по оси Z, задаваемая для некоторого элемента. Ось Z при этом направлена в сторону пользователя. Больше число — ближе элемент.

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

Казалось бы, этих знаний достаточно, чтобы начать использовать z-index на страницах. Однако, не всё так просто.

<div></div>
<div></div>

Похоже, что-то пошло не так. Мы сделали у первого блока z-index больше чем у второго, так почему же он отображается ниже? Да, он идёт по коду раньше — но казалось бы, это должно играть роль только при равных значениях z-index.

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

Из этого небольшого и очень сжатого текста можно сразу вынести много важной информации.

z-index управляют наложением не отдельных элементов, а контекстов наложения (групп элементов)
Мы не можем произвольно управлять элементами в разных контекстах друг относительно друга: здесь работает иерархия. Если мы уже находимся в «низком» контексте, то мы не сможем сделать его элемент выше элемента более «высокого» контекста.
z-index вообще не имеет смысла для элементов в нормальном потоке (у которых свойство position равно static). В эту ловушку мы и попались в примере выше.
Чтобы элемент задал новый контекст наложения, он должен быть позиционирован, и у него должен быть назначен z-index.
Если элемент позиционирован, но z-index не задан, то можно условно считать, что он равен нулю (для простых случаев это работает так, нюансы рассмотрим позже).
А ещё отдельные контексты наложения задаются элементами со значением opacity, меньшим единицы. Это было сделано для того, чтобы можно было легко перенести альфа-блендинг на последнюю стадию отрисовки для обработки видеокартой.

Но и это ещё не всё. Оказывается, с элементами без z-index тоже не всё так просто, как может показаться.

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

Итак, рассмотрим весь список.

3. Вывод дочерних контекстов с отрицательными z-index
4. Вывод дочерних блочных элементов в нормальном потоке (только фоны)
5. Вывод дочерних float элементов
6. Вывод контента элементов в нормальном потоке: инлайновые и инлайново-блочные потомки, инлайновый контент внутри блочных потомков, включая строки текста *
7. Вывод дочерних контекстов с нулевыми и auto z-index **
8. Вывод дочерних контекстов с положительными z-index

* в порядке обхода дерева depth-first
** для контекстов с z-index: auto все дочерние контексты считать потомками текущего контекста, то есть «вытаскивать» их наверх на текущий уровень

Уже не так просто, правда? Можно примерно проиллюстрировать данную схему следующей картинкой:

Также есть возможность открыть пример на codepen и поиграться с ним своими руками.

Но и это ещё не всё. Казалось бы, алгоритм и так достаточно сложен: нам нужно сперва подтянуть дочерние контексты внутри псевдоконтекстов (помните про значение auto?), затем произвести сортировку для двух списков z-index, выстроив их в числовой ряд, потом пройти по дочерним элементам: сначала по блочным в нормальном потоке, потом по плавающим, затем по инлайновым и инлайново-блочным…

Но тут нас ждёт целых два сюрприза. Первый, если повезёт, нас не коснётся. Связан он с тем, что фон с рамками и содержимое блочных элементов выводятся на разных стадиях — но если наш самописный движок для каждого текстового узла создаёт автоматически инлайновый элемент, то с этим всё будет ок, они естественным образом будут выведены позже.

А вот второй совсем не так тривиален. Заключается он в пометке

For each one of these, treat the element as if it created a new stacking context, but any positioned descendants and descendants which actually create a new stacking context should be considered part of the parent stacking context, not this new one.

у float и inline-block/inline (но не block!) элементов.

Что же это означает на практике? А означает это то, что их мы должны обработать так же, как и элементы с z-index: auto. То есть во-первых, обойти их поддеревья и вытащить оттуда дочерние контексты, поместив их на текущий уровень. Но в остальном мы должны обращаться с ними как с элементами, задающими свой контекст. Это означает, что всё поддерево внутри них, вытянувшееся после обхода в линейный список, должно остаться атомарным. Или, иными словами, мы не можем перетасовывать порядок элементов так, чтобы потомки такого элемента «всплыли» выше своего родителя. И если для дочерних контекстов — это интуитивно ясно (потому что алгоритм рекурсивный), то вот здесь — уже не настолько.

Поэтому приходится при написании кода движка идти на хитрость с тем, чтобы элементы float, inline и inline-block до до поры не раскрывали своих потомков (за исключением дочерних элементов с позиционированием и z-index, формирующих контексты наложения), а потом запускать для них всю функцию рекурсивно, но уже наоборот с учётом того факта, что дочерние контексты должны при обходе пропускаться.

Несколько примеров для демонстрации этого явления:

<div>
    <div></div>
</div>

Здесь дочерний элемент имеет z-index и позиционирован. Он «всплывает» наверх, но выводится под синим квадратом, поскольку элементы с отрицательными z-index выводятся на стадии 3, а float элементы — на стадии 5.

<div>
    <div></div>
</div>
<div>
    <div></div>
</div>

В данном примере второй элемент (зелёный) выводится раньше первого (голубого), и поэтому ниже. Однако дочерние элементы вытягиваются наверх (поскольку задают собственные контексты), поэтому в данном случае они идут в том же порядке, в котором они идут именно в исходном дереве (порядок их предков после перестановки не важен!). Если у первого дочернего элемента выставить z-index равный 1, то получим уже такую картинку:

Добавим больше элементов.

<div>
    <div>
        <div></div>
    </div>
</div>
<div>
    <div>
        <div></div>
    </div>
</div>

Тут дочерние контексты вытаскиваются и из float-ов, и из обычных блоков, порядок при этом сохраняется таким, как был в исходном дереве.

Наконец, последний пример:

<div>
    <div></div>
</div>
<div></div>

Как видим, «выпрыгнуть» из block элемента — в отличие от остальных случаев вполне возможно, и поскольку у нас всплывает inline-block элемент, он выведется последним по счёту в данном документе.

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

habr.com

Свойство z-index

Опубликовано: 11 июля 2015 Обновлено: 30 апреля 2019

Наложение элементов с помощью свойства z-index

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

В нормальном потоке position: static элементы располагаются последовательно один за другим в том порядке, в котором они определены в html-документе. По умолчанию установлен z-index: auto;.

Рис. 1. Позиционирование элементов вдоль оси Z

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

Рис. 2. Воздействие свойства z-index на позиционированные элементы

Контекст наложения

Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде. Если для элементов не задан z-index, браузер отображает элементы на странице в следующем порядке:

Корневой элемент <html>, который содержит все элементы веб-странице.

Блочные элементы, не плавающие и не позиционированные.

Плавающие float не позиционированные элементы в порядке их расположения в исходном коде.

Строковые не позиционированные элементы (текст, изображения).

Позиционированные position элементы в порядке их следования в исходном коде. Последний из них будет расположен на переднем плане.

Рис. 3. Порядок расположения элементов в 3D пространстве по умолчанию

<div>
    <header></header>
    <p><img src="https://html5book.ru/images/winter-image.jpg">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <aside></aside>
    <article></article>
    <footer></footer>
</div>

Как видно из рисунка, элемент с position: absolute; находится на переднем плане, далее идет текст, под ним располагаются плавающие элементы с float: left;, не позиционированные блочные элементы расположены на заднем плане (так как плавающие и позиционированные элементы удаляются из потока, то блочные не позиционированные элементы их игнорируют и располагаются друг за другом, в соответствии с разметкой, поэтому элемент <footer> расположился под элементом <header>).

Свойство z-index создает новый контекст наложения. Оно позволяет изменить порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства, влияющие на контекст наложения — opacity, filter, transform):

Корневой элемент <html>, который содержит все элементы веб-странице.

Позиционированные элементы с отрицательным значением z-index.

Блочные элементы, не плавающие и не позиционированные.

Плавающие float не позиционированные элементы в порядке их расположения в исходном коде.

Строковые не позиционированные элементы (текст, изображения).

Позиционированные элементы со значениями z-index: 0; и z-index: auto;.

Позиционированные элементы с положительными значениями z-index. Высокое значение индекса отобразит элемент на переднем плане. Элементы с равными значениями z-index будут отображаться согласно их расположения в исходном коде.

Рис. 4. Свойство z-index создает новый контекст наложения элементов в 3D пространстве

html5book.ru

То, что вам никто не говорил о z-index в статье «То, что вам никто не говорил о z-index» / Habr

Toy June 10, 2014 at 11:43 AM
Почти два года назад вышла статья «What no one told you about z-index» (и её перевод на Хабре «То, что вам никто не говорил о z-index»), авторы которой рассказывают о малоизвестной (76% проголосовавших пользователей Хабра слышат об этом впервые), но документированной возможности создания нового контекста наложения указав opacity меньше единицы.

Но несмотря на название статьи, авторы не рассказали вам ещё кое о чём.

Предполагается, что вы знакомы с понятием контекста наложения (англ. stacking context).

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

— Из статьи «То, что вам никто не говорил о z-index». Для понимания темы настоятельно рекомендую к ознакомлению либо её, либо классический труд на MDN.
Новый контекст наложения формируется в случаях:

Корневой элемент () всегда содержит корневой контекст наложения. Любой элемент на странице, не участвующий в локальном контексте наложения (сформированном любым из последующих вариантов), участвует в корневом контексте наложения.
Элемент с position отличным от static и значением z-index отличным от auto. Кроме одного исключения для position: fixed, но я это вынес в отдельный пункт.
Элемент имеет значение opacity меньше, чем 1.

Flex-элемент со значением z-index отличным от auto, даже в случае position: static.
Трансформированные элементы: значение transform отличное от none; transform-style со значением preserve-3d; и perspective со значением отличным от none.
CSS Regions: установление значения flow-from отличное от none для элемента с content отличным от normal.
Paged Media: каждый Page-Margin Box устанавливает собственный контекст наложения.
И наконец пункт, ради которого я и пишу эту статью — мобильные браузеры на основе WebKit, а также Google Chrome 22+ всегда создают новый контекст наложения для position: fixed-элементов, даже с z-index: auto!

В любом случае W3C даёт лишь рекомендации, а каждый вендор решает сам для себя следовать им или нет. Нам же, простым разработчикам, остаётся лишь учитывать подобные нюансы в своих веб-приложениях (хорошо, что одна корпорация с небезызвестным продуктом закаляла нас годами).

Благодарю за внимание!

Only registered users can participate in poll. Log in, please.

95.0%Да986
5.0%Нет52

Tags:: Add tags

habr.com

z-index | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox		Android	iOS
6.0+	8.0+	1.0+	4.0+	1.0+	1.0+	3.0+	1.0+	1.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Синтаксис

z-index: число | auto | inherit

Значения

В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index, но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно.

Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент. Значение inherit указывает, что оно наследуется у родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>z-index</title>
  <style>
   #layer1, #layer2, #layer3, #layer4 {
    position: relative; /* Относительное позиционирование */
   } 
   #layer1, #layer3 {
    font-size: 50px; /* Размер шрифта в пикселах */
    color: #000080; /* Синий цвет текста */
   }
   #layer2, #layer4 {
    top: -55px; /* Сдвигаем текст вверх */
    left: 5px; /* Сдвигаем текст вправо */
    color: #ffa500; /* Оранжевый цвет текста */
    font-size:70px;  /* Размер шрифта в пикселах */
   }
   #layer1 { z-index: 2; }
   #layer2 { z-index: 1; }
   #layer3 { z-index: 3; }
   #layer4 { z-index: 4; }
  </style>
 </head>
 <body>
  <p>Слой 1 наверху</p>
  <div>Слой 1</div>
  <div>Слой 2</div> 
  <p>Слой 4 наверху</p>
  <div>Слой 3</div>
  <div>Слой 4</div> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства z-index

Объектная модель

[window.]document.getElementById(«elementID»).style.zIndex

Браузеры

Список, созданный с помощью тега <select>, в браузере Internet Explorer 6 всегда отображается поверх других элементов, несмотря на значение z-index.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и интерпретирует auto как 0.

В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.

htmlbook.ru

Почему z-index не работает? — css

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

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

Я прочитал много разных документов относительно z-индекса и прочитал много ответов здесь, в Stack Overflow. До сих пор я пробовал следующее:

Добавление свойств позиции ко всем div.
Добавление непрозрачности со значением 0.99 в div, которые я хочу скрыть.
Применение различных комбинаций значений атрибута позиции (например, относительного, фиксированного, абсолютного).

Тем не менее, я не имел никакого успеха в том, чтобы сделать родительский div выше всех остальных div. Что я делаю неправильно?

Я создал JSFiddle с примером, который я только что описал: https://jsfiddle.net/y8jfdz7w/15/.

.first {
  position: absolute;
  z-index: 100;
  width: 500px;
  height: 500px;
  background-color: grey;
}
.second {
  position: absolute;
  z-index: 2;
  width: 450px;
  height: 450px;
  top: 25px;
  left: 25px;
  background-color: orange;
  opacity: 0.99;
}
.third {
  position: absolute;
  z-index: 3;
  width: 400px;
  height: 400px;
  top: 25px;
  left: 25px;
  background-color: yellow;
  opacity: 0.99;
}
.fourth {
  position: absolute;
  z-index: 20;
  width: 350px;
  height: 350px;
  top: 25px;
  left: 25px;
  background-color: green;
  opacity: 0.99;
}
.fifth {
  position: absolute;
  z-index: 5;
  width: 300px;
  height: 300px;
  top: 25px;
  left: 25px;
  background-color: pink;
  opacity: 0.99;
}

<div>
  <div>
    <div>
      <div>
        <div>
        </div>
      </div>
    </div>
  </div>
</div>

источник поделиться