CODEWITHSUNDEEP
htmlcss
spen123
spen123

Reputation: 3524

Set <Header> above Other Elements - CSS

I have some html and while things are loading I have a <div> that display while it loads, when it is loading currently the loading appears above everything, but I want the header to be above the loading screen. Here is the 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>

And here is the 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

}

As you can see I set the z-index of the header higher than everything else but it is still below the loading screen here is a JSBin with a running example, in the example I show the loading screen for 3 seconds.

How can I get the header above the loading screen?

Thanks

Upvotes: 3

Views: 6726

Answers (3)

Alex
Alex

Reputation: 8695

z-index woks by position. Add position:relative to the header.

Point, Note:

Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).

JSbin

Upvotes: 12

liviu blidar
liviu blidar

Reputation: 361

just add in the header{}

  position:absolute;
  top:0;

If I've got the question right this should do what you need.

Upvotes: 3

Gonzalo
Gonzalo

Reputation: 1876

Use this on the header tag:

position: relative;

this one will also work but could change the rest of the html, I don't know what else you have on it.

position: absolute;

Upvotes: 4

Related Questions