website header hiding behind content when position is fixed
css, css-position
Solution
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.
Problem
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 </abbr></a></li> <li><a href="aboutus.html"> <abbr title="About Us">About Us </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