嵌套元素的CSS Z索引问题 [英] css z-index issue with nested elements

问题描述

我想在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属性.我该怎么办?

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

解决方案

请勿为.bank指定任何z-index，以避免创建新的

 .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，否则将是不可能的，因为您的元素永远不会属于同一堆栈上下文.如您在上一个链接中所读:

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

有关更多详细信息，请参见:为什么具有z-index值的元素不能覆盖其子级?

I have 3 HTML elements that I want to order on the z plane:

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

I want the button to be on top of the bank but behind the card. But the button is always on top of both the bank and the card no matter what I try.

Edit: I noticed that removing z-index and transform from '.bank' solves it, but I need the transform property. What can I do?

What may cause it not to work? Thanks

解决方案

Don't specify any z-index to .bank to avoid creating new stacking context and simply adjust the z-index of the other elements. This will work because all the 3 elements belong to the same stacking context so you can specify any order you want.

.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

Considering you code, the only way is to remove the z-index and transform from .bank or it will be impossible because your elements will never belong to the same stacking context. As you can read in the previous 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.

Related for more details: Why can't an element with a z-index value cover its child?

这篇关于嵌套元素的CSS Z索引问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！