我有一些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秒.
如何在加载屏幕上方显示标题？
谢谢