Z-index issue in child and sibling elements

Question

I'm having three div in my page.

One parent (z-index: 5)
One sibling (of the parent) (z-index: 10)
One child (of the parent) (z-index: 11)

All the div are using position: fixed property.

My problem is the stacking order of the three elements.

I'm using the 'sibling' div as a freeze layer in the app.

I want the sibling div to be positioned between the parent and its child div

AFAIK, by using the position: fixed property, we can position the divs anywhere in a page and use any stacking order.

But it's not working for my current scenario.

Please find the attached code:

.fixed {
  position: fixed;
}

.outer {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: yellow;
  z-index: 5;
}

.child {
  width: 200px;
  height: 30px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: red;
  z-index: 11;
  color: #fff;
}

.sibling {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
}

<div class="fixed outer">
  <div class="fixed child">
    I want this div to be on top
  </div>
</div>
<div class="fixed sibling">

</div>

you only way is to remove positiion:fixed and z-index from the parent element to be able to bring the child behind : https://jsfiddle.net/o4Lewp76/ — Temani Afif, Sep 09 '19 at 09:16
I'm sorry but in your fiddle, the `.sibling` freeze layer is nowhere visible because it is behind the `.parent` element. I want the `.sibling` stacked between the `.child` and `.parent`. — Allan Jebaraj, Sep 09 '19 at 09:42
https://jsfiddle.net/xkvq16Lu/ simply adjust z-index without touching the parent — Temani Afif, Sep 09 '19 at 09:45
You have changed the position of the parent to `absolute`. I cannot proceed with this answer as I NEED all the three divs to be of `position: fixed`. And IMHO I don't think this is a duplicate question of what you've mentioned ! — Allan Jebaraj, Sep 09 '19 at 09:54
as I said, if you keep position:fixed you cannot do this, it's impossible. The duplicate is a canonical duplicate explaining all what you need to know about stacking context, painting order, z-index, etc. If you read it carefully you will understand why what you want is simply impossible — Temani Afif, Sep 09 '19 at 09:56

score 0 · Answer 1 · answered Sep 09 '19 at 07:39

0

Can you change your html structure like this ? It is working then.

<div class="fixed outer">
  <div class="fixed child">
    I want this div to be on top
  </div>
  <div class="fixed sibling">

  </div>
</div>

answered Sep 09 '19 at 07:39

Piyush Jain

1,895
3
19
40

1

I cannot modify the HTML structure. – Allan Jebaraj Sep 09 '19 at 07:41

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Your assumption is not correct.

position: fixed creates a new stacking context

A stacking context is formed, anywhere in the document, by any element in the following scenarios:

Root element of the document ().

[...]

Element with a position value fixed or sticky (sticky for all mobile browsers, but not older desktop).

Inside a stacking context the z-index value will influence the stacking order, but not outside

(Same source, emphasis mine)

Within a stacking context, child elements are stacked according to the same rules previously explained. Importantly, the z-index values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.

I myself find this to be not very useful in most applications.

So you can only have an influence on the stacking order between elements, if those elements share the same stacking context. In your case you must change the HTML code. I reckon, that you don't want that, but you could use pseudo elements to the rescue

.fixed {
  position: fixed;
}

body:after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: yellow;
  z-index: 5;
}

.child {
  width: 200px;
  height: 30px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: red;
  z-index: 11;
  color: #fff;
}

.sibling {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
}

<div class="outer">
  <div class="fixed child">
    I want this div to be on top
  </div>
</div>
<div class="fixed sibling">

</div>

Z-index issue in child and sibling elements

2 Answers2