Question

I’ve got 2 divs on top of another div, but when I resize the window they stay put, instead of moving with the div behind them. I thought that if there position is relative they move along with the previous div, but it doesn’t seem to work like this. What am I missing?

CSS and HTML below, simplified.

<div class="wrapper" style="margin: 0 auto; text-align: center;">
<div id="0">
            <img src="0.gif" width="960px" alt="" />
            <div class="top">
                <div id="tag" ><img src="tag.png" alt="" /></div>
                <div id="tag2"><img src="5500.png" alt="" /></div>
            </div>
</div>
</div>

And CSS like this:

#0 {
        clear:                  right;
        z-index:                0;
}    
.top {
        float:                  left;
        z-index:                1;
        clear:                  left;
        position:               relative;

}

#tag {
        margin-top:             -500px;
        margin-left:            -600px;


}

#tag2{
        margin-left:            750px;

}

Answer 1

It seems like you’re expecting the top div, with its associated tag divs, to move with the 0.gif image when you resize the page. Instead, it’s moving relative to the left edge of the wrapper div, which is pegged to the left-hand side of the screen. You will probably get the result you want by adding width: 960px to the style of your .wrapper div.

For further enlightenment, check the bounding boxes on each of your divs. You may find that a temporary border: 2px solid green style helps clear things up.