Mark Mark - 2 months ago 6
HTML Question

CSS3 boxshadow on top of all other elements?

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 in a 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

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

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