css - 绝对定位的元素即使在相对容器中也移动

Question

我在谷歌上搜索了又搜索并检查了 stackoverflow，实际上我找到了答案，这是合乎逻辑的，我理解它，但它对我不起作用!当我调整浏览器大小时，绝对定位的 div 会移动。我把它们放在一个相对的容器里，但它们仍然在移动。显然我做错了什么，但我需要帮助才能找到问题所在。

<div id="wrapper">
    <div id="logo">
        <img src="zgodalogotyp.png" width="240px">
    </div>
    <div id="line"></div>
    <div id="box"></div>
</div>

和css:

#wrapper {
    height: auto;
    margin-top: 0;
    margin-bottom: 50px;
    margin-left: 30px;
    margin-right: 30px;
    padding: 10px;
    background-color: white;
    position: relative;
    background-position: center;
    z-index: 0;
    clear: both;

}
#box {
    position: absolute;
    margin-top: 265px;
    right: -30px;

    width: 400px;
    height: 250px;
    background-color: #624051;
    z-index: 10;
    clear: both;
}
#line {
    margin-top: 254px;
    height: 56px;
    width: 455px;
    background-color: #000000;
    opacity: 0.2;
    z-index: 11;
    right: -30px;
    position: absolute;
}

我的代码中有更多的 div 存在这个问题，但我使用了相同的方案。提前致谢

Answer 1

不知道您要达到什么目的，但我会尝试猜测 ;) - 一切都会移动，因为相对定位元素没有指定宽度，而您将这些绝对元素定位在右侧。也许设置容器宽度可以解决您的问题。或者简单地将绝对元素定位在左侧而不是右侧。