z-index is not working with position fixed

Question

I've something like the following css:

#one{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}
#two{
    position: relative;
    z-index: 9;
    width: 200px;
    height: 200px;
    background: red;
}
#link{
    position: relative;
    z-index: 9999999; /*this is not in higher layer why??? */
}

I cannot increase the z-index of #two as per my design.

But I've assigned higher z-index to the #link but it's not getting in higher layer.

So, why the position fixed is blocking to the layer (z-index) ?

jsfiddle

If the position of #one wasn't positioned fixed then it would work fine. So, my question is why position fixed is giving me a bug?

Does this answer your question? [z-index not working with fixed positioning](https://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning) — Melebius, Mar 26 '21 at 10:01

score 6 · Accepted Answer · answered Aug 27 '14 at 10:31

Why the position fixed is blocking to the layer (z-index) ?

This is because of The stacking context. CSS positioning and adding a z-index value to an element creates a new stacking context.

From MDN page:

Note: The hierarchy of stacking contexts is a subset of the hierarchy of HTML elements.

Hence in your particular case:

<div id="one">
    <div id="overlay"></div>
</div>
<div id="two">
    <a href="#" id="link">test</a>
</div>

The hierarchy of stacking contexts would be:

Root
- #one
- #two
  - #link

And #link would be placed under the #one no matter how much its z-index value is.

One option is increasing the z-index value of #two element (more than #one).

@C-linkNepal `fixed` positioning is not the case: http://jsfiddle.net/0q84xq87/2/ But the order of HTML elements are placed in DOM. If you use `relative` positioning for `#one` the computed height and width would be 0 because it doesn't have any contents: http://jsfiddle.net/0q84xq87/3/ — Hashem Qolami, Aug 27 '14 at 10:38

score 1 · Answer 2 · answered Aug 27 '14 at 10:31

Do you want the link hover #two? something like that?

#one{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
#two{
    position: relative;
    z-index: 2;
    width: 200px;
    height: 200px;
    background: red;
}
#link{
    position: relative;
    z-index: 9999999;
}

http://jsfiddle.net/0q84xq87/1/

score 0 · Answer 3 · answered Aug 27 '14 at 10:24

0

You need to add z-index to wrapper div

#two{
    position: relative;
    z-index: 9;
    width: 200px;
    height: 200px;
    background: red;
    z-index: 9999;
}
#link{
    position: relative;
}

answered Aug 27 '14 at 10:24

amol

1,535
9
10

I've claimed with bold text that I cannot increase the z-index of #two as per my design... – Bhojendra Rauniyar Aug 27 '14 at 10:25
`z-index` only works with same layer elements. In above case it works only with `#one` and `#two`. If you cant increase the `z-index` of `#two` then you can add separate wrapper for link which has greater `z-index` than `#one` – amol Aug 27 '14 at 10:34

score 0 · Answer 4 · answered Aug 27 '14 at 10:30

0

Because #link's z-index is relative to #two's (which is #link's parent) z-index then #one's and #two's z-index are relative to their parent(in this case body).

answered Aug 27 '14 at 10:30

Xlander

1,331
12
24

z-index is not working with position fixed

4 Answers4