弹窗被页面内容遮挡如何修复？附代码咨询图片叠加文字实现建议

问题1：弹窗被遮挡的修复方案 #

弹窗被遮挡是层叠顺序设置缺失导致的，直接修改.popup__cart的CSS规则，添加足够高的z-index属性即可：

.popup__cart {
    position:fixed;
    width:100%;
    height:100%;
    background-color:rgba(0, 0, 0, 0.8);
    top:0;
    left:0;
    opacity:0;
    visibility:hidden;
    overflow-y: auto;
    overflow-x:hidden;
    transition: all 0.3s ease 0s;
    /* 新增z-index，数值只要高于页面其他定位元素即可 */
    z-index: 9999;
}

如果修改后仍然被遮挡，需要检查弹窗的父级元素是否设置了transform、opacity < 1、will-change: transform这类会创建层叠上下文的属性，这类属性会导致子元素的z-index被限制在父级层叠上下文内，把弹窗DOM节点移到body直接子节点位置即可解决。
另外你当前提供的CSS代码中.popup__cart__content规则末尾缺少闭合的}，请补充完整避免样式异常。

问题2：图片叠加文字的优化建议 #

你当前的写法可以实现基础效果，但适配性较差：固定的left、top、宽高值仅适配当前固定尺寸的卡片，一旦卡片或图片尺寸调整，文字就会出现错位、溢出问题。可按如下规则优化：

1. 给图片外层的.image容器设置定位上下文，避免文字定位受外层元素影响：

.image {
  position: relative;
  /* 容器尺寸和图片保持一致 */
  width: fit-content;
}

2. 修改文字的定位规则，用自适应居中替代固定偏移值：

.card_cat_title {
    position: absolute;
    /* 水平垂直居中，适配不同尺寸的容器 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* 去掉固定宽高，用最大宽度限制，适配不同长度的文字 */
    max-width: 90%;
    text-align: center;
    /* 可选：添加文字阴影或半透明背景，提升文字在不同亮度图片上的可读性 */
    text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

3. 补充a标签的样式，保证点击区域覆盖整张图片：

.image a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

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