!! обратите внимание, что все приведенные ниже цитаты с * в конце взяты из этого источника
Также обратите внимание, что вложение играет большую роль. Если элемент B расположен поверх элемента A, дочерний элемент элемента A никогда не может быть выше элемента B. *
Как green div, который является потомком blue, может взобраться на red div?
Возможно, вы неверно истолковали это предложение. Он предназначен для той ситуации, когда ни у одного из элементов не установлено z-index. Если вы стилизуете элементы без установки z-index, то это правда. Посмотрите на интерактивный пример, приведенный ниже, без изменения z-index элементов.
.main {
border: 1px solid;
padding-left: 50px;
}
.red, .blue {
width: 100px;
height: 100px;
}
.red {
background-color: red;
position: relative;
top: 50px;
left: -50px;
}
.blue {
background-color: blue;
}
.green {
width: 50px;
height: 50px;
position: relative;
top: -25px;
background-color: green;
}
<div class="main">
<div class="red"></div>
<div class="blue">
<div class="green"></div>
</div>
</div>
Как видите, следующее утверждение верно
Без значения z-index элементы складываются в том порядке, в котором они отображаются в DOM (самый нижний элемент на том же уровне иерархии отображается сверху) *
Однако, во-первых, это не очевидно, потому что позиция синих равна static, в отличие от двух других элементов, чьи position равны relative (таким образом, нестатические). Если вы ожидаете, что синий цвет выше красного (и ниже зеленого), то вам нужно изменить его position атрибут CSS. Это также упоминается в ссылке, как указано ниже
Элементы с нестатическим позиционированием всегда отображаются поверх элементов со статическим позиционированием по умолчанию. *
В приведенном ниже примере я дал синему элементу (ищите «ДОБАВЛЕНО») нестатическое значение позиции. Это приводит к аналогичному поведению, когда все элементы position равны static: сначала идет красный, затем синий идет сверху, а затем зеленый сверху, потому что это дочерний элемент синего цвета (ниже по иерархии).
.main {
border: 1px solid;
padding-left: 50px;
}
.red, .blue {
width: 100px;
height: 100px;
}
.red {
background-color: red;
position: relative;
top: 50px;
left: -50px;
}
.blue {
background-color: blue;
position: relative; /* !! ADDED !! */
}
.green {
width: 50px;
height: 50px;
position: relative;
top: -25px;
background-color: green;
}
<div class="main">
<div class="red"></div>
<div class="blue">
<div class="green"></div>
</div>
</div>
Теперь вернемся к первой цитате;
Также обратите внимание, что вложение играет большую роль. Если элемент B расположен поверх элемента A, дочерний элемент элемента A никогда не может быть выше элемента B. *
Это происходит, когда вы только присваиваете элементу B (в данном случае .red) значение z-index. В приведенном ниже примере я добавил значение z-index к красному элементу.
.main {
border: 1px solid;
padding-left: 50px;
}
.red, .blue {
width: 100px;
height: 100px;
}
.red {
background-color: red;
position: relative;
top: 50px;
left: -50px;
z-index:1; /* !! ADDED !! */
}
.blue {
background-color: blue;
position: relative;
}
.green {
width: 50px;
height: 50px;
position: relative;
top: -25px;
background-color: green;
}
<div class="main">
<div class="red"></div>
<div class="blue">
<div class="green"></div>
</div>
</div>
Видите, зеленый элемент больше не появляется. Это потому, что красный выше синего. И зеленый является частью синего.
В вашем вопросе вы дали зеленому значение z-index. Это отменит текущее поведение, так что оно станет выше красного элемента, как показано здесь ниже.
.main {
border: 1px solid;
padding-left: 50px;
}
.red, .blue {
width: 100px;
height: 100px;
}
.red {
background-color: red;
position: relative;
top: 50px;
left: -50px;
z-index:1;
}
.blue {
background-color: blue;
position: relative;
}
.green {
width: 50px;
height: 50px;
position: relative;
top: -25px;
background-color: green;
z-index: 2; /* !! ADDED !! */
}
<div class="main">
<div class="red"></div>
<div class="blue">
<div class="green"></div>
</div>
</div>