设置z-index无效：背景视频覆盖HTML按钮问题求助

你的问题有两个核心原因：

• z-index 仅对非static定位的元素生效，你的按钮没有设置position属性，默认是static，所以设置z-index:2不会起作用。
• 你把视频、按钮等可视元素放在了<head>标签内，这不符合HTML规范，浏览器会自动调整元素位置，但可能导致布局层级异常。

修正步骤： #

1. 将所有可视元素（视频、按钮、音频）移到<body>标签内
2. 给按钮添加定位属性（比如position: relative或position: fixed），让z-index生效

修正后的CSS代码： #

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
}

#myButton {
  position: relative; /* 添加定位，让z-index生效 */
  width: 300px;
  height: 200px;
  font-size: 18px;
  padding: 10px;
  cursor: pointer;
  z-index: 2;
  /* 可选：添加背景色让按钮更显眼 */
  background: rgba(255,255,255,0.8);
  border: none;
}

修正后的HTML代码： #

<html lang="en">
<head>
  <link rel="stylesheet" href="/style.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Doffy</title>
</head>
<body>
  <video autoplay muted loop id="myVideo">
    <source src="/images/doffy.mp4" type="video/mp4">
  </video>
  <button type="button" id="myButton"> New music</button>
  <audio id="BackgroundM" hidden="true">
    <source src=""  type="audio/mp3" id="source">
  </audio>
  <script src="/main.js"></script>
</body>
</html>

这样修改后，按钮就会显示在视频上方了。如果需要按钮固定在页面某个位置，也可以把position: relative换成position: fixed，再配合top/left属性调整具体位置。

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