z-index 和 position fixed 如何在 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 .

Answer 2

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 3

Change your

position:fixed; 

to

position:absolute; 

on .fixed , then it works.