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>

我希望按钮位于 bank 之上，但位于 card 之后.但是按钮总是在 bank 和 card 之上，无论我尝试什么。

编辑：我注意到从“.bank”中删除 z-index 和转换可以解决问题，但我需要转换属性。我能做什么？

什么可能导致它不起作用？谢谢

Answer 1

不要指定任何 z-index 到 .bank 以避免创建新的 stacking context 并简单地调整其他元素的 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>

更新

考虑到您的代码，唯一的方法是从 .bank 中删除 z-index 和 transform，否则这是不可能的，因为您的元素永远不会属于相同的堆叠上下文。正如您在之前的 link:

中所读到的

Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

相关详细信息：

Answer 2

您可以通过仅将 z-index 添加到卡片 class 并将元素置于绝对值中来实现。

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

css 嵌套元素的 z-index 问题

css z-index issue with nested elements

css

z-index