CSS: covering fixed element with z-index

Question

HTML: ```

``` 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?

Accepted Answer

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:

- The stack level of the box in the current stacking context.

- Whether the box establishes a local stacking context.

CSS: covering fixed element with z-index

Solution

Problem