CSS3 boxshadow on top of all other elements?

Question

I have a page setup as follows

<div class="Header"> Header content </div>

<div class="Content"> Main Body Content </div>

Now in the CSS for the header class, i'm putting

.Header {
    box-shadow: 3px 3px 10px #000;
}

This box-shadow however gets covered up by the Content div. Is there a way to have the shadow from this div on top of all other divs, without going the absolute positioning route?

Answer 1

You probably want to stick it on a higher z-index. try this:

.Header {
    position:relative;
    z-index:999;
}