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..

possible duplicate of [z-index not working with fixed positioning](http://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning) — dsgriffin, May 03 '13 at 15:17
Please tell me you're not doing page layout with br tags. If you're using more than two, you're doing it wrong. — isherwood, May 03 '13 at 15:25
you are combining 2 positions `absolute` and `fixed` for the same element `.overlay` — LRA, May 03 '13 at 15:26
@fotanus same here...the
package is more visible than any other code on here. — klewis, May 03 '13 at 16:56

score 10 · Answer 1 · edited Jan 26 '17 at 18:50

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.

score 5 · Answer 2 · edited Apr 27 '17 at 20:10

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.

score -7 · Answer 3 · edited Aug 19 '17 at 10:46

-7

Change your

position:fixed;

to

position:absolute;

on .fixed, then it works.

edited Aug 19 '17 at 10:46

Bhargav Rao

50,140
28
121
140

answered Nov 14 '16 at 17:12

Sebastien Axinte

127
9

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

3 Answers3

Linked