css - Orden de apilamiento de elementos afectados por opacidad

css3 z-index

Question

¿Cómo se relacionan el z-index y la opacity al decidir el orden de apilamiento de un elemento en HTML?

cuando mantengo la opacity menor que 1 en un elemento que tiene un z-index digamos 999 . El elemento va detrás del elemento que no tiene z-index .

$(function() {
  $("#checkbox1").on("change", function() {
    $("#green-parent").toggleClass("add-opacity", this.checked);
  });
});

.green,
.blue {
  position: absolute;
  width: 100px;
  line-height: 100px;
  text-align: center;
  color: white;
}
.green {
  z-index: 999999999;
  top: 50px;
  left: 50px;
  background: green;
}
.blue {
  top: 60px;
  left: 90px;
  background: blue;
}
.add-opacity {
  opacity: 0.99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="checkbox1" type="checkbox" value="1">
<label for="checkbox1">Add opacity to green box parent</label>


<div id="green-parent">
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>

Answer 1

Además del developer.mozilla.org/en-US/docs/Web/Guide/CSS/… Alexey Ten señaló en su comentario (que es un factor aquí), el z-index es relativo al contenedor del elemento. En este caso, sus elementos azules y verdes están contenidos dentro de padres div separados que no tienen un z-index definido. Debido al orden HTML, el último div (el que tiene el cuadro azul) aparecerá sobre el anterior (el verde).

En este ejemplo a continuación, agregué la clase .first al primer div padre y .second al segundo, luego les .second sus propias propiedades de z-index .

.green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

.green {
  z-index:999999999;
  top: 90px;
  left: 60px;
  background: green;
}
.gp{
  opacity:0.99;
}
.blue {
  top: 100px;
  left: 100px;
  background: blue;
}

.first, .second {
  position: relative;
}

.first {
  z-index: 2;
}

.second {
  z-index: 1;
}

<div class="first">
  <span class="green">Green</span>
</div>
<div class="second">
  <span class="blue">Blue</span>
</div>

Answer 2

Los elementos posicionados con un valor de índice z distinto de "auto" y los elementos con un valor de opacidad inferior a 1 generan un contexto de apilamiento. Consulte las reglas sobre el orden de pintura .

En su primer ejemplo, tenemos el contexto de apilamiento de raíz con varios descendientes que incluyen:

• cuadro verde posicionado con índice z positivo
• cuadro azul posicionado con índice z auto

El cuadro azul con índice z auto se coloca detrás; el recuadro verde con índice z positivo se coloca al frente (ver la regla n. ° 8 y 9).

En su segundo ejemplo tenemos:

• un elemento con opacidad (que contiene un cuadro verde; tenga en cuenta que el índice z en el cuadro verde se vuelve local para este elemento)
• cuadro azul colocado sin índice z

Ambos elementos pertenecen a la misma categoría (ver la regla no. 8). En cuyo caso, el orden HTML determina qué elemento aparece delante. El cuadro azul aparece más adelante en el orden de origen, por lo que aparece al frente.