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>