z-index issue for css and html

Question

**Here is a simple code **

div {
  border: 1px solid blue;
}

.one {
  background-color: red;
  width: 300px;
  height: 300px;
  
}


.two {
  background-color: orange;
  width: 300px;
  height: 300px;
  
  position: relative;
  top: 100px;
  left: 100px;
  
  z-index: 10;
}

.twenty {
  
  background-color: pink;
  width: 300px;
  height: 300px;  
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 500;
}


.three {
  margin-top: -10px;
  margin-left: 10px;
  background-color: yellow;
  width: 300px;
  height: 300px;
}


.four {
  background-color: green;
  width: 300px;
  height: 300px;
  
  position: relative;
  top: 80px;
  left: 120px;
  z-index: 11;
}

<div class="one">

  <div class="two">

    <div class="twenty">
        Can pink be above green?
    </div>
  </div>
</div>
<div class="three">
  <div class="four">

  </div>
</div>

How to make the pink square to be above the green square? Is it possible with CSS changes only without HTML changes? Why z-index applied to the .twenty class doesn't work in this case? Thank you.

This question is NOT a duplicate of Why can't an element with a z-index value cover its child? :

In this question we'd like the child to cover, not the parent!

simply remove z-index from two – Temani Afif Mar 24 '21 at 20:57 — Temani Afif, Mar 24 '21 at 20:57

Artemiy Dyakov · Answer 1 · 2021-03-28T18:16:00.203

2

All layers, except the twentieth, should not have Z order. We specify absolute an order and an order of a layer on Z.

.twenty{
position: absolute;
...
z-index: 1;
}

edited Mar 28 '21 at 18:16

answered Mar 24 '21 at 20:16

Artemiy Dyakov

31
3

Mattia Astorino · Answer 2 · 2021-03-30T06:42:55.570

You should set .four with a lower z-index than .two which is the element that contains .twenty but this may not be the expected result (green also becomes under the orange).

It's not possible without changing the HTML structure, like putting .twenty inside .four, or redefining all the indexes. This is how the stacking context works.

Given this code:

<div class="A">
  <div class="One"></div>
  <div class="Two"></div>
</div>
<div class="B">
  <div class="Three"></div>
</div>

From the top view

From the side view

Lear more about the stacking context:

score 0 · Answer 3 · answered Mar 24 '21 at 20:05

0

Yes, we can ;)... if orange gets a higher z-index than green...

.two {
   ...  
   z-index: 12;
}

It's because pink is a child of orange...

answered Mar 24 '21 at 20:05

biberman

5,606
4
11
35

Sorry, it doesn't work. With your solution the green also becomes under the orange, not just under the pink. – Haradzieniec Mar 24 '21 at 20:08
@Artemiy Dyakov did it - it works... – biberman Mar 24 '21 at 20:22

z-index issue for css and html

3 Answers3

From the top view

From the side view