Question

I want a div to go under another div. In this example I want the #under to go under #box. I’ve played a bit around with z-index, but I can’t get it to work, I suppose it has to do with the way my markup is arranged.

My question is – is it possible to make #under go under #box without changing the markup?

You can check out my example here: http://jsfiddle.net/timkl/hrsHY/

This is my HTML:

<div id="main-content">

    <div id="box">
        <h2>box</h2>
    </div><!-- /box -->

</div><!-- /main-content -->

<div id="under">
    <h2>under</h2>
</div><!-- /under-->

<div id="footer">
    <h2>footer</h2>  
</div><!-- /footer -->

This is my CSS:

#container {
    font-family: Helvetica;
    color: #ccc;
    font-weight: bold; 
    }


#main-content, #box, #footer, #under {
    padding: 16px;
    }


#box {
    background: #F3F3F1;
    height: 200px;
}

#under {
    height: 40px;
    background: orange;
    margin-top: -100px;
    z-index: -10;
    opacity: .7;
    color: brown;
    }

#footer {
    background: #F3F3F1;    
}

Answer 1

Z-index only works with absolute positioning.

#container {
        font-family: Helvetica;
        color: #ccc;
        font-weight: bold; 
        position: absolute;
    }

    #under {
        height: 40px;
        background: orange;
        margin-top: -100px;
        z-index: -10;
        opacity: .7;
        color: brown;
        position: absolute;
        }

When you desire them to be positioned relative (as in postion: relative;) You can position them absolute within a surrounding div which you position relative to acquire relative positioning of the two div’s combined.