嵌套元素的CSS Z索引问题

一尘不染

嵌套元素的CSS Z索引问题

css

我想在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’中删除z-index和transform可以解决它，但是我需要transform属性。我能做什么？

是什么导致它无法正常工作？谢谢

阅读 247

2020-05-16

共1个答案

一尘不染

不要指定任何内容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>

更新

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

每个堆叠上下文都是 独立的 ：将元素的内容堆叠之后，将按照父堆叠上下文的堆叠顺序 考虑整个元素 。

2020-05-16