css - 绝对定位 : One element expands window, 其他元素不影响它。两者都使用相同的代码:C

Question

我添加了两个 div 来保存背景图像以用于装饰目的 - 应与我一起在网站上工作的艺术家的要求。

起初，它运作良好。这些图像应该显示在包含网站内容的包装 div 的每一侧 - 而不会影响页面宽度。

然后拥有该网站的组织得到了另一个赞助商，我不得不将其 Logo 添加到右侧的列中。我为第 5 个“按钮”创建了一个新 id 并为其创建了一个 div。上传后，我注意到页面底部突然出现了一个滚动条，原因不明。

我起初怀疑按钮是问题所在，但最终发现尽管使用了绝对定位，但最右边的装饰性 div 正在 flex 页面宽度。两个 div 使用相同的代码，只是左右镜像。我不知道是什么导致了这个问题..

(您可以在 www.torucon.no/no/上看到正在运行的问题)

请帮帮我!这是两个 div 的 CSS:

#wolf
{
position:absolute;
min-height:500px;
min-width:498px;
left:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/wolf.png');
z-index:-1;
}

#lion
{
position:absolute;
min-height:500px;
min-width:498px;
right:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/lion.png');
z-index:-1;
}

这是一个显示 div 的 HTML 的 HTML 片段:

<div class="wrapper"> <!-- Contains the entire website for structure --> 
<div id="wolf">
</div>
<div id="lion">
</div>

((以防万一你没明白:包装 div 应该居中，而且确实如此。但是当我调整窗口大小时，我发现在包装内容甚至接近之前很久就出现了滚动条浏览器窗口边框。这在分辨率低或屏幕小的计算机上会很烦人!))

Answer 1

我想你想要的是让狮子和狼随着用户扩大浏览器视口(viewport)逐渐出现，但在其他情况下部分隐藏在包装的两侧。正确吗？

我认为在不触发您不喜欢的滚动条的情况下实现此目的的唯一安全选择是将图像合并为一个并将它们作为背景图像附加到页面的正文元素上。

我相信您在 body 上使用 overflow-hidden 是正确的——如果将视口(viewport)的大小调整到低于包装器的宽度，您将失去滚动查看溢出内容的能力。