How does z-index and position fixed work together in css

Answer 1

You can't do that if .fixed element is acting as a holder for any of its children.

This means that if, for example, you set your h3 with an absolute position to the bottom, it will go to the bottom of its parent element.

z-index works the same way. Its value will be inherited by the parent. Since the z-index default value is 0, your .fixed element has a z-index value of 0, and your h3 has first 0 and then 300.

Answer 2

Change your

position:fixed; 

to

position:absolute; 

on .fixed, then it works.

Answer 3

You set a z-index on an element inside a fixed div that is under the overlay.

In other words, the overlay hiding the z-index value is 301.

You see, it's like lego blocks. .fixed is at the bottom with its z-index at 0.

Then on .fixed your h3 is 300 blocks one over another.

If we add, for example, another div below the h3 tag with z-index of 150, the "tower of blocks" would be lower than the h3 so h3 would be on the top.

Then there is another div(.overlay) on the same DOM level as .fixed with a higher z-index than .fixed. This block would placed right over the 300 blocks of h3.

For example:

<==============================>   <- the .overlay (z-index 1)
            <=>
            <=>
            <=>
            <=>
  <=>       <=>                <- Elements inside .fixed (random z-index)
  <=>       <=>
  <=>       <=>
  <=>       <=>
  <=>       <=>
<==============================>    <- the .fixed (z-index 0)

To set the h3 on top, put it on the same lvl of your overlay or set a higher .fixed z-index.