我试图让一些文本出现在“人工”加载屏幕之后。我尝试使用 z-index 将加载屏幕堆叠在文本之上，因此在它淡出后，您可以看到其后面的文本，但是所述文本不会堆叠，只是在加载时出现在它旁边。我该如何解决这个问题？
<style>
.frontpage {
background-color: black;
position: relative
top: 45%;
left: 50%;
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;
}
.loader {
position: absolute;
left: 45%;
top: 45%;
border: 16px solid #f3f3f3;
border-top: 16px solid #9245ff;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite; }
.mainpage {
position: absolute;
z-index: 9;
}
</style>
<head>
<div class="frontpage">
<div class="loader"> </div>
</div>
<div class="mainpage">
<h1>Test Title</h1>
</div>
</head>
不确定我是否正确理解了你的问题和目标，但这个片段可能会帮助你：
<style>
.frontpage {
background-color: black;
position: relative;
height: 100vh;
animation: fadeout 3s linear forwards;
animation-delay: 5s;
}
h1 {
font-size: 40px;
font-family: "Lucida Console";
color: gray;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
margin: 0;
}
.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;
}
</style>
<head>
<div class="frontpage">
<h1>Test Title</h1>
<div class="loader"> </div>
</div>
</head>
对于这种情况，您可能不需要
z-index<h1>Test Title</h1>
<div class="loader"> </div>
这会将标题放在加载器的顶部
<div class="loader"> </div>
<h1>Test Title</h1>