Понимание z-index: Как этот элемент появляется перед своим родным родителем?

Question

Почему красный div перед зеленым div, когда я удаляю z-index от .wrapperRed?

Похоже, что z-index наследуется до цепочки.

Если я изменяю z-index зеленого div на 6, он остается перед красным даже после удаления строки, описанной в первом предложении.

.wrapperRed { 
 
    height: 200px; 
 
    width: 200px; 
 
    position: absolute; 
 
    z-index: 1; /* Why is the red div in front of the green one, if this z-index is deleted? */ 
 
} 
 

 
.red { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: red; 
 
    z-index: 5; 
 
} 
 

 
.green { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: green; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
    z-index: 1; 
 
}

<div class="wrapperRed"> 
 
    <div class="red"></div> 
 
</div> 
 
<div class="green"></div>

Answer 1

При удалении z-index из .wrapperRed, элемент по умолчанию z-index: auto.

В этом случае, как и .red.green участвуют в том же контексте стэк, потому что позиционируемые элементы не создают контекст стэк, когда z-index является auto (reference).

Узнайте больше о z-index и укладки контексты здесь: Basics of the CSS z-index property

Answer 2

Почему .red ДИВ перед зеленым DIV при удалении Z-индекс из .wrapperRed?

Потому что .red больше не имеет родительского z-index, чтобы ограничить его.

ie.

Перед:.red имеет в пределах родительского .

После того, как:.red имеет глобальный z-index из 5.

N.B. В обоих Перед и После случаев .wrapperRed является всегда за .green. Но, когда он свободен, .red (который составляет 100% ширину и высоту .wrapperRed) появляется перед .green.

---

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

Сравнить:

.wrapperRed { 
 
    height: 200px; 
 
    width: 200px; 
 
    position: absolute; 
 
    background-color: red; 
 
    z-index: 1; 
 
} 
 

 
.yellow { 
 
    position: absolute; 
 
    height: 75%; 
 
    width: 75%; 
 
    background-color: yellow; 
 
    
 
    z-index: 5; 
 
} 
 

 
.green { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: green; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
    
 
    z-index: 1; 
 
}

<div class="wrapperRed"> 
 
    <div class="yellow"> 
 
    </div> 
 
</div> 
 

 
<div class="green"></div>

с:

.wrapperRed { 
 
    height: 200px; 
 
    width: 200px; 
 
    position: absolute; 
 
    background-color: red; 
 
} 
 

 
.yellow { 
 
    position: absolute; 
 
    height: 75%; 
 
    width: 75%; 
 
    background-color: yellow; 
 
    
 
    z-index: 5; 
 
} 
 

 
.green { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: green; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
    
 
    z-index: 1; 
 
}

<div class="wrapperRed"> 
 
    <div class="yellow"> 
 
    </div> 
 
</div> 
 

 
<div class="green"></div>