嵌套元素的css z-index问题答案

【问题标题】：css z-index issue with nested elements嵌套元素的css z-index问题
【发布时间】：2018-08-29 10:04:16
【问题描述】：

我想在 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 可以解决这个问题，但我需要 transform 属性。我该怎么办？

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

【问题讨论】：

你能创建一个sn-p吗，所以有人很快解决了你的问题。

标签： css z-index

【解决方案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，否则这是不可能的，因为您的元素永远不会属于同一个堆叠上下文。正如您可以在上一个链接中阅读的那样：

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

【讨论】：

感谢您的回答。我试图将 css 复制到我的代码中，但它仍然无法正常工作。我注意到我的“银行”有一个“转换：translateY()”属性，它破坏了你的解决方案。如何在仍然使用转换的同时修复它？
@Guy 啊，那你不能，转换创建一个堆叠上下文，所以在这种情况下是不可能的......唯一的方法是避免创建堆叠上下文。您可以查看我分享的链接以了解创建堆叠上下文的属性
我明白了。我找到了一种不使用变换来定位银行的方法，现在一切正常。谢谢！

【解决方案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>

【讨论】：