使用position:absolute导致横向滚动的SVG背景布局求助

核心问题分析 #

你之前的方案出问题的原因：

• 父容器.blob未设置有效高度，内部图片用绝对定位脱离文档流后，容器高度坍缩为0，overflow:hidden直接隐藏了所有内容。
• 没处理页面默认边距和横向滚动规则，导致绝对定位元素超出视口时触发滚动条。

解决方案代码 #

HTML保持不变，调整CSS如下：

/* 重置页面默认样式，消除布局偏移 */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 直接禁止页面横向滚动 */
}

img {
  display: block;
  width: 100%;
}

.blob {
  position: relative;
  width: 100%;
  min-height: 100vh; /* 容器至少占满视口高度，内容过长时自动延伸 */
}

.blob-img {
  position: absolute;
  z-index: -1;
  width: 400px;
  top: 0;
  right: -220px; /* 控制超出视口的范围 */
}

关键说明 #

• html, body设置overflow-x:hidden：从根源上禁止页面横向滚动，超出视口的元素会被直接裁剪，不会触发滚动条。
• .blob设置min-height:100vh：确保容器至少覆盖整个视口高度，当页面内容超过视口时，容器会随内容高度自动扩展，保证背景图片的定位参照有效。
• 绝对定位的.blob-img会相对于.blob容器定位，部分超出视口的区域被body的overflow-x:hidden裁剪，同时因为.blob在正常文档流中，图片会随页面滚动而移动，符合需求。

扩展：多SVG blob的处理 #

如果需要添加多个背景blob，只需复制.blob容器结构，调整每个.blob-img的top、right、width等参数即可，上述规则依然适用。

内容的提问来源于stack exchange，提问作者Denis