PhotoSwipe图片画廊标题元素垂直缩放时覆盖图片的布局问题

标题覆盖图片的核心问题是CSS定位逻辑错误：你给#popUpWerkInformationenTitle设置了position: fixed; bottom: 0，该属性会让元素始终固定在浏览器视口的底部位置，完全脱离文档流，不会跟随PhotoSwipe内图片的实际渲染位置、尺寸变化调整位置。无论图片在视口中占据多大高度，标题都会固定在视口底部向上30px的位置，只要图片没有撑满整个视口高度，就会出现图片下方仍有空隙、但标题已经覆盖在图片上的现象。
另外你自定义元素虽然挂载到了wrapper容器下，但fixed定位的元素不会受父容器位置约束，相当于挂载逻辑没有生效。

1. 替换错误的CSS样式 #

删除原有相关CSS，替换为以下代码，用基于容器的弹性布局替代fixed定位：

.smallWerkInformationen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 避免标题层阻挡图片滑动、缩放等交互操作 */
}

.wrapDiv {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 30px;
    box-sizing: border-box;
}

#popUpWerkInformationenTitle {
    width: 100%;
    text-align: center;
    pointer-events: auto; /* 恢复标题本身的交互能力，不需要可删除 */
}

#popUpWerkInformationenTitleSpan {
    display: inline-block;
    text-align: center;
    background-color: black;
    color: #fff;
    border-radius: 5px;
    padding: 5px 12px;
    font-size: 1rem;
}

上述样式的逻辑是：让自定义标题层和PhotoSwipe幻灯片内容区尺寸完全一致，通过flex布局默认把标题推到内容区最底部，这个位置刚好对应图片下方的空余区域，因为PhotoSwipe渲染图片时始终会在内容区内居中放置。同时删除了原代码中写死的min-width: 600px，避免窄屏设备下标题溢出。

2. 调整JS注册逻辑 #

修改元素注册配置，补充必要的事件绑定，保证窗口缩放、图片缩放切换时标题位置正常：

lightbox.pswp.ui.registerElement({
    name: 'werkInformationen',
    className: 'smallWerkInformationen',
    appendTo: 'root', // 挂载到灯箱根节点
    order: 10, // 控制渲染层级，保证标题在图片层上方
    isButton: false,
    onInit: (el, pswp) => {
        var wrapDiv = document.createElement('div');
        wrapDiv.className = 'wrapDiv';

        var popUp = document.createElement('div');
        popUp.className = 'popUpWerkInformationenTitle';
        popUp.id = 'popUpWerkInformationenTitle';

        var span = document.createElement('span');
        span.className = 'child';
        span.id = 'popUpWerkInformationenTitleSpan';
        
        wrapDiv.appendChild(popUp);
        popUp.appendChild(span);
        el.appendChild(wrapDiv);

        const updateTitle = () => {
            if(!pswp.currSlide) return;
            var paramsFromCurrentWerk = new URLSearchParams(pswp.currSlide.data.src);
            span.innerHTML = `${paramsFromCurrentWerk.get('id')} | ${paramsFromCurrentWerk.get('werkName')} | ${paramsFromCurrentWerk.get('material')} | ${paramsFromCurrentWerk.get('kuenstler')}`;
        };
        // 绑定多事件保证内容、位置实时更新
        pswp.on('change', updateTitle);
        pswp.on('resize', updateTitle);
        pswp.on('zoomPanUpdate', updateTitle);
    }
});

3. 空间不足场景适配 #

如果窗口高度过小、图片撑满内容区导致下方没有足够空间放标题，可以加媒体查询自动调整标题位置：

@media (max-height: 500px) {
    .wrapDiv {
        justify-content: flex-start;
        padding-top: 20px;
        padding-bottom: 0;
    }
    #popUpWerkInformationenTitleSpan {
        background-color: rgba(0,0,0,0.7);
    }
}

调整后效果完全符合预期：图片下方有充足空间时标题始终位于图片正下方，空间不足时标题自动移到视口顶部，不会遮挡图片核心展示区域。

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