Question

我想在z平面上订购3个HTML元素：

.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'中删除z-index并进行转换可以解决此问题，但是我需要使用transform属性。我该怎么办？

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

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>

更新

考虑到您的代码，唯一的方法是从z-index中删除transform和.bank，否则将是不可能的，因为您的元素永远不会属于同一堆栈上下文。如您在上一个链接中所读：

每个堆叠上下文都是自包含的：在元素内容之后被堆叠，整个元素被考虑 父堆栈上下文。

Answer 2

您可以通过仅向卡片类添加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>

嵌套元素的CSS Z索引问题

2 个答案: