Question

<div id="header"> Header content </div>
<div id="content"> Content </div>

#header {
    background-image: url("/Content/Images/bg.png");
    background-repeat: repeat-x;
    float: left;
    height: 45px;
    margin: 0;
    width: 960px;
    z-index: 10;
}

#content {
    background-image: url("/Content/Images/separator_shadow_both.png");
    background-repeat: repeat-y;
    float: left;
    margin: -4px 0 0;
    padding: 0 10px;
    width: 940px;
    z-index: 9;
}

Header div have background that have 45 px height – 41 pixel solid color and bottom 4px is transparent shadow. I want that shadow to show above the content. I put content div margin top -4px to crawls under header div, but he appears above instead below of div1. z-indexes are set different… Is it z-index problem or header background can’t be positioned above content?

Thank you

Answer 1

The z-index property is only relevant for positioned elements. Solution: Set position: relative on #header. You don’t even need the z-index since positioned elements always render on top on non-positioned ones.