css z-index issue with nested elements

Question

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

Can you please create a snippet, So someone has quickly fixed your issue. — jaydeep patel, Aug 29 '18 at 10:05

Temani Afif · Accepted Answer · 2019-09-30T15:41:11.960

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?

Thank you for your answer. I tried to copy the css to my code and it still didn't work. I noticed that my 'bank' has a 'transform: translateY()' property which broke your solution. How can I fix it while still using the transform? — Guy, Aug 29 '18 at 10:39
@Guy ah you cannot then, transform create a stacking context so it's impossible in this case ... the only way is to avoid creating stacking context. You can see the link I shared to know the properties that create a stacking context — Temani Afif, Aug 29 '18 at 10:58
I understand. I found a way to position the bank without using the transform and now everything works well. Thank you! — Guy, Aug 29 '18 at 12:10

score 1 · Answer 2 · answered Aug 29 '18 at 10:18

You can do this by adding z-index only to card class and placing the elements in absolute.

.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 issue with nested elements

2 Answers2

Linked

Related