移动端audio元素覆盖fixed侧边栏问题求助（附代码）

构建含宗教赞美诗与音频的网页时，小屏幕设备上audio元素始终显示在fixed定位的侧边栏上方，尝试调整z-index属性未解决问题。

核心原因 #

z-index 属性仅对非static定位的元素生效，audio元素默认是static定位，单独设置z-index不会产生效果；同时侧边栏未设置明确的z-index值，导致层级关系混乱。

具体修改 #

1. 给侧边栏设置明确的高优先级z-index：
   在.side-panel的CSS规则中添加：

z-index: 10;

2. 给audio元素添加定位并设置较低的z-index：
   修改audio的CSS规则为：

audio{
    position: relative;
    z-index: 1;
}

完整修改后的CSS关键片段 #

.side-panel{
    background-color: #ffffff;
    position: fixed;
    left: 0;
    height: 100%;
    transform: translateX(-23rem);
    transition: all 0.2s ease-in-out;
    z-index: 10; /* 新增 */
}

audio{
    position: relative; /* 新增 */
    z-index: 1; /* 调整为低于侧边栏的值 */
}

原理说明 #

• 给侧边栏添加z-index:10，确保它在定位元素中的层级高于audio；
• 给audio设置position:relative让z-index生效，同时设置z-index:1，使其层级低于侧边栏，这样侧边栏展开时会覆盖audio元素。

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