z-index失效：加载层无法覆盖文本的问题求助

你的代码存在几个关键问题导致加载屏无法覆盖文本，以下是具体修复步骤和完整代码：

问题分析与修复点 #

• CSS语法错误：.frontpage中position: relative后未加分号，导致后续top、left等属性失效，这是核心问题之一。
• 加载屏定位错误：使用position: relative会让加载屏占据文档流空间，导致下方文本并排显示，需改为position: fixed（或absolute）使其脱离文档流，实现全屏覆盖。
• 加载屏尺寸与位置错误：原top:45%、left:50%会让加载屏偏移，需设置top:0、left:0、width:100vw、height:100vh确保全屏覆盖。
• 缺失动画关键帧：代码中使用了fadeout和spin动画，但未定义@keyframes，动画无法生效。
• HTML结构错误：内容元素（<div>）不应放在<head>标签内，需移至<body>中。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .frontpage {
            background-color: black;
            position: fixed; /* 改为fixed脱离文档流，全屏覆盖 */
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 10; 
            animation: fadeout 3s linear forwards;
            animation-delay: 5s;
        }

        h1 {
            font-size: 40px; 
            font-family: "Lucida Console"; 
            color: white ;
            text-align: center;
            margin-top: 45vh; /* 让标题垂直居中 */
        }

        .loader {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); /* 让加载器完美居中 */
            border: 16px solid #f3f3f3; 
            border-top: 16px solid #9245ff; 
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite; 
        }

        .mainpage {
            position: relative; /* 改为relative即可，无需absolute */
            z-index: 9;
            background-color: #1a1a1a; /* 给主页面加背景，避免加载屏淡出后背景透明 */
            min-height: 100vh;
        }

        /* 定义旋转动画 */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 定义淡出动画 */
        @keyframes fadeout {
            0% { opacity: 1; }
            100% { opacity: 0; visibility: hidden; } /* 淡出后隐藏元素，避免遮挡交互 */
        }
    </style>
</head>
<body>
    <div class="frontpage">
        <div class="loader"></div>
    </div>

    <div class="mainpage">
        <h1>Test Title</h1>  
    </div>
</body>
</html>

额外优化说明 #

• 给.loader添加transform: translate(-50%, -50%)，确保加载器在加载屏中完美居中，比单纯用left/top更可靠。
• 给.mainpage添加背景色和最小高度，避免加载屏淡出后页面背景透明。
• 在fadeout动画末尾添加visibility: hidden，确保加载屏淡出后不再遮挡下方元素的交互。

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