媒体幻灯片层被Create弹窗遮挡，求前端层级调整解决方案

核心原因 #

这个问题本质是CSS的z-index层级冲突：弹窗的层级高于媒体幻灯片层，导致幻灯片被遮挡。另外还需要排查父元素的overflow属性是否限制了幻灯片的显示范围。

具体解决方案 #

1. 强制提升幻灯片层的z-index层级

找到媒体幻灯片对应的元素（比如你代码中的<video id="player">），给它添加更高的z-index，同时确保元素设置了定位（position属性为relative/absolute/fixed）：

#player {
  position: relative;
  /* 数值要高于弹窗的z-index，比如Bootstrap模态框默认是1050，这里设为1060 */
  z-index: 1060;
}

如果是整个媒体选择卡片的弹窗内容被遮挡，给弹窗内的媒体容器加样式：

.media_row {
  position: relative;
  z-index: 1060;
}

2. 检查父元素的overflow属性

如果幻灯片的父容器设置了overflow: hidden，会裁剪超出容器的内容，导致幻灯片显示不全或被遮挡。找到对应父容器，修改为：

.parent-container-class {
  overflow: visible;
}

3. 调整DOM结构层级

如果幻灯片是动态生成的，确保它的DOM节点直接挂载在弹窗内部的顶层（避免嵌套在多个低层级容器中）。比如将幻灯片元素移到弹窗的直接子元素位置，减少父元素z-index对它的影响。

4. 排查弹窗的z-index设置

确认Create弹窗的z-index值，比如使用浏览器开发者工具（F12）查看弹窗元素的z-index，确保幻灯片的z-index数值严格大于弹窗的数值。

验证方法 #

修改后刷新页面，打开Create弹窗，使用浏览器开发者工具检查幻灯片元素的z-index是否生效，同时确认没有父元素的overflow限制。

内容的提问来源于stack exchange，提问作者M Idham Khaliq