Каково значение z-index по умолчанию для html-элементов?

Question

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

Есть ли какое-либо значение по умолчанию, указанное для разных тегов?

Answer 1

Поскольку свойство z-index работает только с позиционированными элементами (position: absolute|relative|fixed), оно не имеет значения по умолчанию без дальнейшей стилизации.

Значение по умолчанию при позиционировании равно z-index: auto, что аналогично z-index: 0.

Если у вас есть несколько позиционированных элементов с z-index: auto или z-index: 0, они будут сложены в соответствии с ( W3C CSS2 спецификацией для стекового контекста ):

Все позиционные потомки с 'z-index: auto' или 'z-index: 0', в древовидном порядке.

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

div {
  position: absolute;
}

#div1 {
  background-color: red;
  height: 50px;
  width: 50px;
}

#div2 {
  background-color: green;
  height: 40px;
  width: 40px;
}

#div3 {
  background-color: blue;
  height: 30px;
  width: 30px;
}

<div id="div1">
  <div id="div2"></div>
</div>
<div id="div3"></div>

Answer 2

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

Answer 3

Значением по умолчанию будет порядок появления, см .: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/