html - Usando el índice z para obtener div por encima de otro div

css css3

Question

Quiero que div1 esté por encima de div2 . Intento con z-index pero no funciona.

He intentado este código:

div {
  width: 100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 1;
}
.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 2
}

<div class="div1"></div>
<div class="div2"></div>

Answer 1

En muchos casos, se debe colocar un elemento para que funcione el z-index .

De hecho, la aplicación de la position: relative a los divs en la pregunta resolvería el problema del z-index .

En realidad, position: fixed , position: absolute y position: sticky también habilitarán z-index , pero esos valores también cambian el diseño. Con position: relative el diseño no se ve afectado.

Esencialmente, siempre que el elemento no sea position: static (el valor predeterminado) se considera posicionado y z-index funcionará.

Algunas respuestas aquí y en preguntas relacionadas afirman que z-index solo funciona en elementos posicionados. A partir de CSS3, esto ya no es cierto.

Los elementos que son elementos flexibles o elementos de cuadrícula pueden usar z-index incluso cuando la position es static .

De las especificaciones:

4.3. Artículo Flex Z-Ordering

Los elementos flexibles pintan exactamente igual que los bloques en línea, excepto que el orden del documento modificado se usa en lugar del orden del documento sin procesar, y z-index valores del z-index distintos de crear auto un contexto de apilamiento incluso si la position es static .

5.4. Orden del eje Z: la propiedad del z-index

El orden de pintura de los elementos de la cuadrícula es exactamente el mismo que el de los bloques en línea, excepto que el orden del documento modificado se usa en lugar del orden del documento sin procesar, y z-index valores del z-index además de crear auto un contexto de apilamiento, incluso si la position es static .

Aquí hay una demostración del z-index trabajando en elementos flexibles no posicionados: https://jsfiddle.net/m0wddwxs/

Answer 2

La propiedad predeterminada para div es position:static , Add position:relative en ambos div entonces solo funcionará z-index .

Answer 3

Puede agregar position: relative a ambos divs y crear stacking context

div {
  width:100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  position: relative;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
  position: relative;
}

<div class="div1"></div>
<div class="div2"></div>

O podría usar transform-style: preserve-3d; así que .div1 debería colocarse en el espacio 3D y no aplanarse en el plano.

div {
  width:100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  transform-style: preserve-3d;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
}

<div class="div1"></div>
<div class="div2"></div>

También puede usar alguna transform aleatoria como translate o rotate

div {
  width:100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  transform: translate(1px);
}

.div2 {
  background: blue;
  transform: translate(1px, -15vh);
  z-index: 1;
}

<div class="div1"></div>
<div class="div2"></div>

Filters también funcionan pero tienen un mal Support

div {
  width:100px;
  height: 100px;
}

.div1 {
  background: red;
  filter: brightness(0.4);
  z-index: 2;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  filter: brightness(0.4);
  z-index: 1;
}

<div class="div1"></div>
<div class="div2"></div>

Answer 4

z-index solo se aplica a elementos con una position no sea static , por ejemplo: relative , absolute o fixed .

div {
  width:100px;
  height: 100px;
  position:relative;
}
.div1 {
  background: red;
  z-index: 2;
}
.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1
}

<div class="div1"></div>
<div class="div2"></div>