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

Question

body {
  height: 3000px;
}

.fixed {
  position: fixed;
  width: 100%;
  height: 60px;
  top: 0;
  left: 0;
  background: #f4f4f4;
}

.fixed h3 {
  position: relative;
  z-index: 300;
  color: #fff;
}

.overlay {
  background-color: #000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: .5;
  position: fixed;
  z-index: 1;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

<div class="overlay"></div>
<div class="fixed">
  <center>
    <h3>
      Only this thing should be brought on top of overlay..
    </h3>
  </center>
</div>

Now how do I place get the h3 inside the .fixed div on top of overlay. Please post some reading on fixed along with z-index.

http://jsfiddle.net/CvMLw/4/ Check the above jsfiddle, So how do i bring the h3 on top of overlay..

Answer 1

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.