IE7+ Position:Fixed Z-index scroll doesnt work
hi I've created a fixed navigation bar/header at the top of a page with the content below. on all browsers, if i scroll on the page, the content goes under the fixed position nav bar EXCEPT for IE (no surprise there) How do i edit the CSS so this works?
<div class="navbar" style="width:100%; position:fixed; left: 3px; top: 0px; z-index:1;">
blah blah blah navi开发者_JS百科gation
</div>
<div class="content">
whats up, im the content and im really long so i need to scroll
</div>
here is an example of the behavior that works in most browsers but not the IE's of the world.
http://myivyleaguer.com/media/satcenter.html
You are forcing IE into quirks mode because you haven't declared a doctype (http://www.quirksmode.org/css/quirksmode.html).
If you add this:
<!DOCTYPE html>
to the very top of your HTML document then position:fixed will work as expected. That is the HTML5 doctype, short and gets the job done.
In order to get the fixed position to work in IE6 as well, you'll need to add this to your stylesheet (I'm assuming the inline stuff is just for your testing):
* html .navbar { position: absolute; }
See this page (http://ryanfait.com/position-fixed-ie6/) for an explanation.
精彩评论