媒体查询下CSS Z-Index不生效，移动端图片与内容重叠求助

问题核心出在你给.title-image设置了position: static——z-index仅对非static定位的元素生效，所以你写的z-index:1完全不起作用，这就是图片被功能区域覆盖的根本原因。

修复步骤： #

1. 先修正定位属性，让z-index生效
   把.title-image的定位改成relative（不破坏原有文档流，是最稳妥的选择），同时设置一个比功能区域更高的z-index值，确保图片层级在上方：

@media (max-width: 1020px) {
   .title-row{
     text-align: center;
   }
   .title-image{
     position: relative; /* 替换static，让z-index生效 */
     transform: rotate(0);
     object-fit: contain;
     z-index: 999; /* 设一个比功能区域更高的数值即可 */
   }
}

2. 若布局本身不该重叠，直接调整结构分离元素
   如果图片和功能区域本来就应该上下/左右分开显示，不用纠结层级，直接通过布局属性实现分离：

@media (max-width: 1020px) {
   .title-row{
     text-align: center;
     display: flex;
     flex-direction: column;
     gap: 20px; /* 给图片和功能区域添加间距 */
   }
   .title-image{
     position: relative;
     transform: rotate(0);
     object-fit: contain;
   }
}

补充说明： #

object-fit是控制图片自身的填充方式，和层级覆盖问题无关，之前的尝试方向不对。记住核心规则：z-index必须搭配relative/absolute/fixed定位才能生效，先搞定这个基础，再根据实际需求调整层级或布局。

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