CODEWITHSUNDEEP
csscss-position
thewhitetulip
thewhitetulip

Reputation: 3309

website header hiding behind content when position is fixed

I am designing a website for a school and I want the header of site to be fixed just like facebook has. I tried the fix provided by [this][1] question on stackoverflow but it was hardly of any use in the header. I have an image, basically the logo of the school, where I do position: fixed, but the header hides behind the page.

HTML:

<body>
  <div id="header" > <img src="images/iesheader_nnew1.jpg" /></div>
    
    <div id="menu">
      <ul>
           <li><a href="index.html"><abbr title="Home">Home&nbsp;&nbsp;</abbr></a></li>
           <li><a href="aboutus.html"> <abbr title="About Us">About Us&nbsp;&nbsp;</abbr> </a></li>
           <li><a href="acad.html"><abbr title="Academics">Academics</abbr></a></li>
           <li><a href="admin.html"><abbr title="Administration">Administration</abbr></a></li>
           <li><a href="news.html"><abbr title="News">News</abbr></a></li>
           <li><a href="contact.html"><abbr title="Contact Us">Contact Us</abbr> </a></li>
           <li><a href="photo.html"><abbr title="Photo Gallery">Photo Gallery</abbr> </a></li>
      </ul>     
        <div class="cleaner"></div>
</div>

CSS:

#header {
    margin-left: 0px;
    width: auto;
    height: 90px;
    padding: 0px;
    padding-left:185px;
    font-size: 35px; color:#FFFFFF; 
    background-color: #f6c491;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
#menu {
    position: relative;
    clear: both;
    width: auto;
    height: 38px;
    padding: 0;
    padding-left:185px;
    background-color:#FFFFFF;   
    margin-bottom: 10px;
    margin-left:0px;
}

#menu ul {
    float: left;
    width: 960px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu ul li {
    padding: 0px;
    margin: 0px;
    display: inline;
}

#menu a {
    float: left;
    display: block;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #000;
    outline: none;
    border: none;   
    border-top: 3px solid black;
}

I tried a number of solutions to that, but whatever I do, the header goes behind the page. I want the menu bar also to be fixed but it also is the same... [1]: Page navigation with fixed header

Upvotes: 21

Views: 103881

Answers (6)

Alp Eren G&#252;l
Alp Eren G&#252;l

Reputation: 103

You can use z-index

Which element that you want to be in front of other elements, give the z-index value higher.

Like this:

z-index: 300;//navbars

z-index: 0;//contents

Upvotes: 3

Vinicius Santana
Vinicius Santana

Reputation: 4106

When you add position fixed and/or absolute to a element, it means that the element will leave the natural flow and now it belongs to "layer" that is not related to the layer where all the elements are with the natural flow of the document.

This is a great feature as now you can position those elements anywhere without worring about the rest of the page.

So, about your case. You picked the right position, fixed. Now the elements above it doesn't see it and you have to manually add the height of this header element as a margin and/or padding to the top of the next element.

For example, if you had the following:

   <div class="header"></div>
   <div class="content"></div>

Repeating what you did add a position fixed to header and considering that it's height is 50 px the content element would get a padding-top:50px and it should do the trick.

   <style>
   .header{position:fixed;top:0;height:50px;}
   .content{padding-top:50px;}
   </style>

Upvotes: 14

Vik
Vik

Reputation: 41

When you set the an element to have a fixed positioning, It assumes the other neighbouring elements don't exist. Give the element you want to be fixed a larger z-index. Then to prevent the overlapping, give the element preceded by the fixed element the same padding-top as the height of the fixed element. Hope it helps.

Upvotes: 2

vivek
vivek

Reputation: 2004

Add z-index:1000 to the #header css, and add padding-top to the body css which should be a bit more than header's height. For example, if the header's height is 40px, put the padding-top: 50px to the body css and it should work.

Upvotes: 45

shriganth
shriganth

Reputation: 11

 #header {
      margin-top:-38px; //solution
      margin-left: 0px;
      width: auto;
      height: 90px;
      padding: 0px;
      padding-left:185px;
      font-size: 35px; 
      color:#FFFFFF;   
      background-color: #f6c491;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }

Upvotes: 1

thedrs
thedrs

Reputation: 1464

CSS Z-index might be your solution

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Upvotes: 1

Related Questions