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

[popov654]

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

На самом деле, уже разобрался — это был баг инспектора. Там очень дикие вещи происходят, если менять стили на лету — в том числе и с марджинами, особенно если float элементы присутствуют в тесте. Нужна именно свежая загрузка страницы.

P.S. Я про отладчик Chrome.

[MiXei4]

Невозможно читать примеры в первую очередь из-за цветов. Я не знаю, какой из этих цветов где b3ecf9, b3ecb3, и просто неудобно эти символы читать.
Red blue yellow green подойдут намного больше по-моему.

[popov654]

Они выглядят слишком вырвиглазно. Мне кажется, лучше тогда дописать классы. Завтра добавлю.

[Beginer_First]

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

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

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

Сколько искал не нашел первых двух, автор поправь или направь меня на эти пункты ))

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

Думаю можно было бы вставить html разметку

Хотелось больше узнать про отрисовку элементов с указанным opacity свойством меньше единицы.
Спасибо за статью!

[popov654]

Думаю можно было бы вставить html разметку

Там есть ссылка на пример с разметкой на codepen :)

Хотелось больше узнать про отрисовку элементов с указанным opacity свойством меньше единицы.

А там всё просто: это альтернативно указанию свойства position, при этом z-index по умолчанию, опять же, равен auto.

Сколько искал не нашел первых двух, автор поправь или направь меня на эти пункты ))

Выдержка из текста:

3. Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then tree order.
4. For all its in-flow, non-positioned, block-level descendants in tree order: If the element is a block, list-item, or other block equivalent:
1) background color of element.
2) background image of element.
3) border of element.

[bro-dev0]

Лучше не допускать таких ситуаций когда эти знания могут пригодится.

[TotalAMD]

Автор, что вы курили, когда прописывали такие имена цветов для наглядности?