設置<Header>以上其他元素 - CSS

我有一些HTML，而事情正在加載我有一個<div>顯示，而它加載時，當它加載當前加載出現在一切事物之上，但我希望頭在加載之上屏幕。下面是HTML設置<Header>以上其他元素 - CSS

<!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秒。

如何獲取加載屏幕上方的標題？

感謝

來源

2015-12-04 spenf10

在標題上設置定位。使用固定位置，絕對位置或相對位置。 – www139