css z-index проблема с вложенными элементами

Question

У меня есть 3 HTML-элемента, которые я хочу заказать в плоскости 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>

Я хочу, чтобы кнопка находилась сверху банка , но за картой . Но кнопка всегда находится поверх банка и карты , что бы я ни пытался.

Редактировать: я заметил, что удаление z-index и transform из '.bank' решает его, но мне нужно свойство transform. Что я могу сделать?

Что может заставить его не работать? Спасибо

Answer 1

Вы можете сделать это, добавив z-index только к классу карты и поместив элементы в абсолют.

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

Answer 2

Не указывайте от z-index до .bank, чтобы избежать создания контекста стека , и просто настройте z-index других элементов. Это будет работать, потому что все 3 элемента принадлежат одному и тому же контексту стека, так что вы можете указать любой порядок, который хотите.

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

UPDATE

Учитывая ваш код, единственный способ - удалить z-index и transform из .bank, иначе это будет невозможно, потому что ваши элементы никогда не будут принадлежать одному и тому же контексту стека. Как вы можете прочитать в предыдущей ссылке:

Каждый контекст стека автономен : после содержимого элемента весь элемент считается в порядке наложения родительский контекст наложения.