定位绝对和水平滚动答案

【问题标题】：Position absolute and horizontal scrolling定位绝对和水平滚动
【发布时间】：2022-10-15 21:51:19
【问题描述】：

我有一些 svg blob 需要添加到背景中。其中一个应该溢出视口，即只有部分 blob 可见，大部分隐藏在视口之外。我用position: absolute; 做到了这一点，但这会导致水平滚动。我一直在寻找解决方案，但我一直看到的一个解决方案对我不起作用。人们建议包装图像并将overflow: hidden 添加到包装器中。但这会使图像完全消失，而不仅仅是溢出部分。

有没有办法定位背景图像，使其溢出视口但不会导致水平滚动？将position: absolute 替换为position: fixed 有点效果，水平滚动消失了，但由于属性的性质，当您向下滚动页面时，blob 只是停留在那里。这不是我需要的行为。这是我到目前为止的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="blob">
<img src="https://81766.com/wp-content/uploads/blob-shape01.svg?x48940" class="blob-img">
  </div>
  
</body>
</html>

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

.blob {
  position: relative;
  overflow: hidden; 
}

.blob-img {
  position: absolute;
  z-index: -1;
  width: 400px;
  top: 0;
  right: -220px;
}

【问题讨论】：

你可以添加更多代码，所以它是Minimal, Reproducible Example好吗？谢谢

标签： html css overflow

【解决方案1】：

为 blob 类添加一个高度 (>= 400px)。

将位置设置为绝对可以将布局流与其祖先/父级分离。这意味着它的尺寸不决定父的尺寸。因为在 blob div 中没有其他元素，所以它的高度仍然为 0。如果添加另一个具有一定高度（而不是“定位”）的元素，它也会显示图像。（还不是 100% 确定为什么 SVG 的计算高度不这样做（可能是因为图像的一部分被隐藏，所以浏览器认为它的高度为 0），但是强制在 blob 上显式或隐式地设置一个高度div 解决了这个问题。）

为了清楚起见，工作代码：

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

.blob {
  position: relative;
  overflow: hidden; 
  height: 400px;
}

.blob-img {
  position: absolute;
  z-index: -1;
  width: 400px;
  top: 0;
  right: -220px;
}

<div class="blob">
<img src="https://81766.com/wp-content/uploads/blob-shape01.svg?x48940" class="blob-img">
  </div>

【讨论】：