Question

I have a curious issue that’s proving difficult. I have five divs stacked vertically in a table cell. I’d like the even-numbered divs to fold behind the middle div but in front of the others with z-indexing so that the stack appears as 1-3-5 by default (and all touching, no whitespace), with the even divs’ placement and movement not affecting those of the odd-numbered divs. However, if I put the even divs into the middle div, the z-indexing of the evens is completely ignored and they appear on top of the middle guy instead of under it.

I need everything here positioned relative to the containing table cell. Absolute positioning sends any one of these elements travelling to places they shouldn’t go. The cell alignment specs are needed as well. Ultimately I want to be able to expand out and contract in the even items with a mouseover (javascript) without moving the odd ones.

  <style type="text/css">
    .oddStationary {
        position:relative;
        width:100px;
        height:120px;
        z-index:1;
        border:solid red;
    }
    .evenMover {
        position:relative;
        width:100px;
        height:120px; 
        z-index:2;
        border:solid yellow;
    }
    .middleStationary {
        position:relative;
        height:300px;
        width:200px;
        z-index:3;
        border:solid orange;
        background-color:pink;
    }
</style>

<table width="600">
    <tr>
        <td valign="top" align="center">
                <div class="oddStationary"></div>
                <div class="evenMover"></div>
                <div class="middleStationary"></div>
                <div class="evenMover"></div>
                <div class="oddStationary"></div>
        </td>
    </tr>
</table>

Answer 1

You need to establish a common reference point for your absolute positioning. By default absolutes go up the HTML tree until they encounter the first “position:relative”, which becomes the new origin. If you don’t have one defined, the “origin” becomes the BODY tag. You can either set TD as “position:relative” or wrap the whole thing in a DIV that has “position:relative”. That’s a good start.