Search code examples
htmlcsscss-positionfixed

CSS: covering fixed element with z-index

HTML:

<div class="wrap">
    <div class="fixed"></div>
</div>
<div class="cover"></div>

CSS:

.cover{z-index: 10;} 
.wrap{position: relative; z-index: 1;} 
.fixed{position: fixed; display: block; z-index: 1;}

Exampale: http://jsfiddle.net/6fq8L/

On page scroll .cover element is hidden behind .fixed element despite its z-index property is higher. How to show .cover element above .wrap and .fixed elements so it will cover them when page is scrolled?

Solution

  • Demo Fiddle

    You need to give cover a position for z-index to work, e.g.

    .cover{z-index: 10;position:relative;}

    From MDN:

    The z-index CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

    For a positioned box, the z-index property specifies:

    1. The stack level of the box in the current stacking context.
    2. Whether the box establishes a local stacking context.