如何让SVG波浪边框固定在图片底部不受浏览器窗口尺寸影响

核心修改思路 #

你当前的波浪边框错位是因为两个核心问题：

1. 波浪边框的DOM节点放在了body直接子级，定位上下文是整个body，固定top:400px的写法完全不响应窗口尺寸变化
2. 没有给图片容器设置相对定位作为定位上下文，所以就算写top:100%也是相对于整个文档而非图片容器计算位置

具体修改步骤 #

1. 调整HTML结构

将波浪边框容器#banner-border移动到.banner容器内部，放在图片节点后面：

<div class="banner">
    <img loop=infinite id="banner-image" src="https://i.ibb.co/8PYMxhg/landscape1.gif" alt="balls">
    <!-- 把波浪边框移到此处 -->
    <div id="banner-border" style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-13.54,39.95 C123.02,106.08 269.74,52.78 500.00,49.98 L501.12,152.45 L0.00,150.00 Z" style="stroke: none; fill: rgb(74,76,81);"></path></svg></div>
</div>

2. 调整CSS样式

新增.banner的相对定位规则，同时修改#banner-border的定位规则：

/* 新增图片容器的定位上下文规则 */
.banner {
  position: relative;
  line-height: 0; /* 消除图片默认的底部留白，避免出现缝隙 */
}

/* 修改波浪边框的定位规则，删掉原有代码里的top:400px */
#banner-border {
  background-color: rgba(255, 255, 255, 0);
  position: absolute;
  z-index: 100;
  width: 100%;
  bottom: 0; /* 固定在父容器.banner的底部，永远贴合图片下沿 */
  left: 0;
}

修改完成后，不管窗口尺寸如何变化，波浪边框都会始终贴合在banner图片的底部，符合预期效果。

内容的提问来源于stack exchange，提问作者Jäger