两张重叠HTML图片使用绝对定位时如何保证链接可正常点击？

• 父容器高度塌陷：你当前代码里所有子元素都设置了position: absolute，全部脱离正常文档流，导致外层相对定位的父容器高度为0，你的跳转链接使用百分比设置宽高，高度会继承父容器的0值，实际没有可点击的交互区域，这是无法点击的核心原因。
• 元素层级逻辑冲突：删除中心图的absolute属性后，中心图回归正常文档流撑开了父容器高度，但背景图是absolute定位层级更低，会被处于正常流的中心图覆盖，因此无法显示。
• 跳转链接不规范：当前href属性只写了www.google.com，缺少https://协议头，实际点击后会被识别为站内相对路径，无法正确跳转到目标地址。

如果不需要强制两张图片都为absolute定位，可以用中心图作为高度基准撑开父容器，调整后的代码如下：

<div style="position: relative; pointer-events: none">
    <!-- 背景图放在最下层，absolute定位 -->
    <img src="/static/BackImage.png" style="width: 100%; height: auto; position:absolute; z-index:4; pointer-events: none;">
    <!-- 中心图改为relative定位，撑开父容器高度，层级高于背景图 -->
    <img src="/static/CenterImage.png" style="width: 100%; height: auto; z-index:5; position: relative; pointer-events: none;">
    <!-- 跳转链接保留最高层级，补全协议头 -->
    <a href="https://www.google.com" title="gg" style="position: absolute; left: 39.75%; top: 15.93%; width: 25.75%; height: 8.64%; pointer-events: all; z-index: 6;"></a>
</div>

如果后续做视差滚动需要两张图都保持absolute定位，可以用aspect-ratio属性给父容器设置和图片一致的宽高比撑开高度，不需要修改图片的定位属性：

<!-- 示例宽高比为16:9，按你实际图片的尺寸替换对应值即可 -->
<div style="position: relative; pointer-events: none; aspect-ratio: 16/9;">
    <img src="/static/CenterImage.png" style="width: 100%; height: auto; z-index:5; position: absolute; pointer-events: none;">
    <img src="/static/BackImage.png" style="width: 100%; height: auto; position:absolute; z-index:4; pointer-events: none;">
    <a href="https://www.google.com" title="gg" style="position: absolute; left: 39.75%; top: 15.93%; width: 25.75%; height: 8.64%; pointer-events: all; z-index: 6;"></a>
</div>

两种方案都可以保证链接可点击，同时两张图片正常重叠显示，不影响后续的视差滚动效果开发。

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