css problema z-index con elementi nidificati

css3 (2)

Ho 3 elementi HTML che voglio ordinare sul piano 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>

Voglio che il pulsante sia in cima alla banca ma dietro la carta . Ma il pulsante è sempre in cima sia alla banca che alla carta, qualunque cosa io provi.

Modifica: ho notato che la rimozione di z-index e la trasformazione da '.bank' lo risolve, ma ho bisogno della proprietà di trasformazione. Cosa posso fare?

Cosa potrebbe causare il mancato funzionamento? Grazie

Non specificare alcun z-index .bank per evitare di creare un nuovo contesto di sovrapposizione e semplicemente regolare l' z-index degli altri elementi. Questo funzionerà perché tutti e 3 gli elementi appartengono allo stesso contesto di impilamento, quindi puoi specificare qualsiasi ordine desideri.

.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>

AGGIORNARE

Considerando il tuo codice, l'unico modo è rimuovere z-index e transform da .bank altrimenti sarà impossibile perché i tuoi elementi non apparterranno mai allo stesso contesto di stacking. Come puoi leggere nel link precedente:

Ogni contesto di impilamento è autonomo : dopo che il contenuto dell'elemento viene impilato, l'intero elemento viene considerato nell'ordine di impilamento del contesto di impilamento padre.

Puoi farlo aggiungendo z-index solo alla classe della carta e posizionando gli elementi in assoluto.

.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>