如何实现多张SVG图片重叠且随页面滚动时保持相对位置不变

核心问题说明 #

当前代码中.moving_room容器未设置相对定位，导致内部设置了绝对定位的图层图片会相对于上层有定位属性的元素偏移，无法精准对齐；同时图片缺少统一的顶部对齐规则，滚动时容易出现错位。

需要修改的CSS代码 #

/* 1. 给房间容器加相对定位，作为内部绝对定位元素的位置参照 */
.moving_room {
    height: 290px;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden; /* 防止图片溢出容器 */
}

/* 2. 统一所有房间图片的对齐规则，保证完全重叠 */
.room_base_img, .room_diagram_img {
    height: 290px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain; /* 保持svg原始360*242比例，不会拉伸变形 */
}

/* 分层控制，基础背景图放在最底层 */
.room_base_img {
    z-index: 1;
}
.room_diagram_img {
    z-index: 2;
}

控制项切换逻辑示例 #

点击按钮切换对应房间元素显示隐藏的参考JS代码：

// 示例：点击Beta按钮切换沙发的显示状态
document.querySelector('#option_b').addEventListener('click', () => {
    const couchEl = document.querySelector('img[alt="couch"]');
    couchEl.style.display = couchEl.style.display === 'none' ? 'block' : 'none';
})

额外适配（可选） #

如果需要滚动控制项时，房间布局图固定在屏幕上不跟随列表滚动，可以给.moving_room增加粘性定位属性：

.moving_room {
    position: sticky;
    top: 0; /* 可自行调整距离滚动容器顶部的距离 */
    z-index: 9; /* 保证不会被其他列表元素遮挡 */
}

内容的提问来源于stack exchange，提问作者J-A-Brown