Question

我在另一个div上面有两个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样式有助于清除问题。

当窗口调整大小时，Div不会移动

1 个答案: