H1标签被视频背景遮挡，z-index无效问题求助

你的代码存在两个核心问题：

1. HTML结构错误：<body>标签被错误嵌套在<head>内部，浏览器解析时会混乱元素的层级关系
2. z-index未生效：z-index仅对非static定位的元素有效，你的h1默认是static定位，所以设置z-index也不会起作用

以下是修正后的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .skyeHeader {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        color: #ff0061;
        position: relative; /* 设置非static定位，让z-index生效 */
        z-index: 1; /* 确保标题层级高于视频 */
        padding-top: 2rem; /* 可选：避免标题贴在页面顶部 */
        margin: 0;
      }

      #landingImage {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        filter: blur(1.5rem);
        z-index: 0; /* 可选：明确视频的层级，低于标题 */
      }
    </style>
  </head>
  <body>
    <h1 class="skyeHeader">SkyeMrGamez</h1>
    <video autoplay muted loop id="landingImage">
      <source src="landingBackground.mp4" type="video/mp4" />
    </video>
  </body>
</html>

关键修改说明：

• 调整HTML结构，将<body>标签移至<head>外部，所有页面内容（h1、video）都放在<body>内，符合HTML规范
• 给.skyeHeader添加position: relative和z-index: 1，让标题的层级高于视频背景
• 可选给视频设置z-index: 0，明确层级关系，增强代码可读性

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