CSS: что вы могли не знать о свойстве opacity и z-index

Всё, написанное в этой статье, является частью стандарта и есть в спецификации W3C. Но кто ее читает? Да почти никто! Ведь намного проще понять большинство нюансов CSS прямо на практике.

Итак, не ходя долго вокруг да около, перейдём к делу.

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

<div>
<span class="red">Red</span>
</div>
<div>
<span class="green">Green</span>
</div>
<div>
<span class="blue">Blue</span>
</div>



.blue, .green, .red {
position: absolute;
}
.blue {
background: blue;
}
.green {
background: green;
}
.red {
background: red;
z-index: 1;
}


Задача:
Сделать так, чтобы красный блок перекрылся синим и зелёным, но при этом выдержав следующие условия:

1. Запрещается менять HTML разметку
2. Запрещаются манипуляции с z-index элементов
3. Свойство position элементов менять нельзя

Решение задачи:
Нужно задать свойство opacity меньше единицы первому элементу (родительскому для красного элемента).
В коде решение выглядит, например, так:

div:first-child {
opacity: 0.99
}


Как это работает
Свойство z-index выглядит весьма прозрачным - чем больше значение, тем выше элемент. К примеру, элемент со свойством z-index: 10 перекроет элемент с z-index: 5. Если вы со мной согласны, то здесь и кроется ошибка. На самом деле - всё не так. Вернее - не совсем так. А вот и варианты:

1. Если свойства z-index и position заданы явно, то порядок наложения будет такой же, как порядок следования элементов в разметке.
2. Если явно ( к примеру position: relative или position: absolute) указать позиционирование элементам (и их внутренним элементам), то такие элементы будут выше элементов без явно заданного свойства position.
3. Последний случай, когда z-index задан. Логично предположить, что элемент с большим значением z-index будет выше элементов с меньшим значением, а любой элемент, которому задан z-index будет выше любого элемента, которому z-index не задан. Но это не так. z-index применяется только для элементов, которые спозиционированы явно (например, position: relative или position: absolute). А помимо этого - свойство z-indexсоздаёт контексты наложения и об этом я напишу ниже

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

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

Новый контекст формируется в следующих случаях:

1. Если элемент – корневой элемент документа
2. Если элемент имеет position отличное от static и его значение z-index не равноauto
3. Если элемент имеет opacity меньше 1