html - 调整窗口大小时 Div 不会移动

Question

我在另一个 div 之上有 2 个 div，但是当我调整窗口大小时，它们保持不动，而不是随着它们后面的 div 移动。我认为如果位置是相对的，它们会与前一个 div 一起移动，但它似乎不是这样工作的。我错过了什么？

下面的 CSS 和 HTML，已简化。

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

像这样的 CSS:

#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

您似乎希望 top div 及其关联的 tag div 随 0.gif 图像一起移动您调整页面大小。相反，它相对于固定在屏幕左侧的 wrapper div 的左边缘移动。您可能会通过将 width: 960px 添加到您的 .wrapper div 的样式来获得您想要的结果。

要进一步了解，请检查每个 div 上的边界框。您可能会发现临时的 border: 2px solid green 样式有助于清除问题。