Loading...
            
        
  
        

      
        
Name
        
Hello
      
            
    

这是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.添加position:relative到header.

点,注意:

仅适用于定位元素(position: absolute;,position: relative;或position: fixed;).

JSbin