¿Por qué position:relative; ¿Parece cambiar el índice z?
Entonces tengo este marcado y dentro hay<div class="mask"></div> el que establece la superposición azul sobre la imagen.
Si no hago el .container position:relative, el texto del título se oculta detrás de la capa azul... Casi como si su uso estuviera imitandoz-index
¿Por qué es este el caso?
Bolígrafo: https://codepen.io/anon/pen/OBbbZB
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
position: relative;
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}<section>
<div class="mask"></div>
<div class="container">
<h1>Hello World</h1>
</div>
</section>
Debe consultar las especificaciones y, más precisamente, el orden de pintura. para comprender cuándo se pinta cada capa.
Sin position:relativesu elemento no se posiciona y se pintará en el paso (4):
- Para todos sus descendientes a nivel de bloque, no posicionados y de flujo entrante en orden de árbol: si el elemento es un bloque, un elemento de lista u otro bloque equivalente:
Luego pintamos los elementos posicionados (incluido el .mask) en el paso (8)
- Todos los descendientes posicionados , opacidad o transformación, en orden de árbol que se clasifican en las siguientes categorías
Ahora, cuando agrega, position:relativecoloca el contenedor también en su posición, por lo que también caerá en el paso (8) y, como se describe allí, consideramos el orden del árbol , ya que ambos no tienen ninguno z-indexespecificado. Entonces el.container en este caso el testamento se pintó más tarde.
Si cambias el orden del elemento (has el contenedor antes que la máscara) notarás que eso position:relativeno tendrá ningún efecto porque en ambos casos el orden de pintura será el mismo:
Mostrar fragmento de código
Si marcamos el paso (8) también dice opacidad o transformación, lo que significa que si también cambias la opacidad del contenedor o agregas una transformación, el orden también cambiará.
Mostrar fragmento de código
También es trivial notar que si agrega z-index(ya sea negativo o positivo) también afectará el orden de pintura y en este caso el orden del árbol no tendrá ningún efecto.
- Contextos de apilamiento formados por descendientes posicionados con índices z negativos (excluyendo 0) en orden de índice z (el más negativo primero) y luego en orden de árbol
....
- Contextos de apilamiento formados por descendientes posicionados con índices z mayores o iguales a 1 en el orden del índice z (el más pequeño primero) y luego en el orden del árbol.
Pintamos el elemento con negativos z-indexen (3) y los positivos en (9) y entre esos pasos tenemos todos los casos en los que z-indexno está involucrado como se describió inicialmente.
