Css problema de índice z con elementos anidados

css3 z-index

Question

Tengo 3 elementos HTML que quiero ordenar en el plano z:

.bank {
width: 200px;
height: 200px;
background-color: grey;
position: absolute;
z-index: 100;
transform: translateY(10%);
}
.card {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
z-index: 300;
}
.button {
width: 50px;
height: 50px;
background-color: green;
position: absolute;
left: 30px;
top: 50px;
z-index: 200;
}

<div class="bank">
bank
<div class="card">card</div>
</div>
<div class="button">button</div>

Quiero que el botón esté en la parte superior del banco pero detrás de la tarjeta . Pero el botón siempre está sobre el banco y la tarjeta, no importa lo que intente.

Edición: noté que al eliminar el índice z y la transformación de ''.bank'' se soluciona, pero necesito la propiedad de transformación. ¿Que puedo hacer?

¿Qué puede hacer que no funcione? Gracias

Answer 1

No especifique ningún z-index en .bank para evitar crear un nuevo contexto de apilamiento y simplemente ajuste el z-index de los otros elementos. Esto funcionará porque los 3 elementos pertenecen al mismo contexto de apilamiento, por lo que puede especificar el orden que desee.

.bank {
position:relative;
background: red;
width: 500px;
height: 200px;
}
.card {
position: absolute;
top:0;
z-index: 2;
height: 100px;
width: 400px;
background: blue;
}
.button {
position: absolute;
top: 0;
z-index: 1;
height: 150px;
width: 450px;
background: yellow;
}
.container {
position: relative;
}

<div class="container">
<div class="bank">
<div class="card"></div>
</div>
<div class="button"></div>
</div>

ACTUALIZAR

Teniendo en cuenta su código, la única forma es eliminar el z-index y transform de .bank o será imposible porque sus elementos nunca pertenecerán al mismo contexto de apilamiento. Como podéis leer en el enlace anterior:

Cada contexto de apilamiento es autónomo : después de apilar el contenido del elemento, el elemento completo se considera en el orden de apilamiento del contexto de apilamiento principal.

Answer 2

Puede hacer esto agregando el índice z solo a la clase de tarjeta y colocando los elementos en absoluto.

.bank {
width: 150px;
background: red;
height: 150px;
position: absolute;
top: 0;
left: 0;
}
.card {
width: 50px;
background: black;
height: 50px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.button {
width: 100px;
background: blue;
height: 100px;
position: absolute;
top: 0;
left: 0;
}

<div class="bank">
<div class="card"></div>
</div>
<div class="button"></div>