z-index Woes: exibindo um elemento filho por trás de seu pai

alcançando o efeito visual desejado de exibir um elemento filho por trás de seus pais no modelo de objeto de documento (DOM) Apesar da implementação generalizada da propriedade Z-Index, às vezes não produz o resultado esperado. Essa técnica ganhou destaque nos últimos anos e fornece uma solução alternativa para esse desafio de longa data.

. Parent { Antecedentes: vermelho; Largura: 100px; Altura: 100px; estilo de transformação: preservação-3d; Posição: relativa; } .criança { Antecedentes: azul; Largura: 100px; Altura: 100px; Posição: Absoluto; topo: -5px; Esquerda: -5px; Transform: translatez (-10px); }

.parent {
  background: red;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
}

.child {
  background: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -5px;
  left: -5px;
  transform: translateZ(-10px);
}

  Parent
  

    Child