我有一些 html，在加载时我有一个 <div>在加载时显示，当前正在加载时，加载显示在所有内容之上，但我希望标题位于加载屏幕上方。这是 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="loading">
<div id="loading-container">
<h1 id="loading_text">Loading...</h1>
</div>
</div>
<header>
<a id="logo" href="user_profile.html">
<h1 id="name">Name</h1>
<h2 id="hello">Hello</h2>
</a>
<nav>
<ul>
<li><a href="user_profile.html">Profile</a></li>
<li><a href="user_info.html" class="selected">Info</a></li>
<li><a href="user_specials.html">Specials</a></li>
<li><a href="user_social.html">Social</a></li>
</ul>
</nav>
</header>
</body>
</html>
这是CSS
header {
float:left;
margin:0 0 30px 0;
padding:5px 0 0 0;
width:100%;
z-index: 102;
}
#logo {
text-align:center;
margin:0;
}
h1 {
font-family:'Nunito', 'sans-serif';
margin: 15px 0;
font-size:1.75em;
font-weight:normal;
line-height:0.8em;
}
h2 {
margin:-5px 0 0;
font-size:0.75em;
font-weight:normal;
}
ul {
padding: 0 0;
}
#loading {
width: 100%;
height: 100%;
left: 0px;
position: fixed;
display: block;
background: rgba(255, 255, 255, 0.5);
z-index: 99;
}
#loading-container {
position: relative;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0);
z-index: 99;
}
#loading_image {
display: block;
margin: auto;
z-index: 100;
}
#loading_text {
color: black;
text-align: center;
z-index: 101;
vertical-align: middle
}
如你所见，我设置了 z-index标题高于其他所有内容但仍在加载屏幕下方的是 JSBin以运行示例为例，在示例中我显示加载屏幕 3 秒。
如何让标题位于加载屏幕上方？
谢谢
最佳答案
z-index 按位置 工作。将 position:relative 添加到 header。
Only works on positioned elements(
position: absolute;,position: relative;orposition: fixed;).
关于html - 将 <Header> 设置在其他元素之上 - CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34079729/