Using CSS Fixed Position Elements Across Browsers Without Javascript
Posted October 16, 2009 at 9:34 AM
Yesterday, I posted my first experimentation with CSS fixed-position elements and getting them to work across all browsers, including IE6. The solution I demonstrated yesterday involved using proprietary Javascript expressions in the CSS that would be used by IE6; this technique worked pretty well, but caused a jittery effect as the "fixed" position elements repositioned themselves during page scroll.
While I was doing research on using the "position: fixed" CSS property, I came across two solutions for getting fixed-position elements in IE6. The first was the one that I demonstrated yesterday; the second one was to fake fixed-position elements by making them absolutely-positioned elements. In order to get that to work, however, we need to move the primary content out of the BODY tag and into a sub-content tag. This way, the BODY tag can have a height / width of 100% which will work for absolutely-positioned elements, while the sub-content container can take care of the scrolling:
| | | | | |
| |  | | ||
| | | |
With this page architecture, since the BODY tag does not scroll, elements within the BODY tag, but outside the sub-content container, can be positioned absolutely and will act just as if they were fixed-position elements. Here is the sample page that I created:
Launch code in new window » Download code as text file »
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Using CSS Fixed Position Across Browsers</title>
- <style type="text/css">
-
- html,
- body {
- margin: 0px 0px 0px 0px ;
- padding: 0px 0px 0px 0px ;
- }
-
- #site-body-container {}
-
- #site-body-content {
- padding: 15px 15px 15px 15px ;
- }
-
- div.fixed-position {
- background-color: #F0F0F0 ;
- border: 1px solid #CCCCCC ;
- height: 48px ;
- line-height: 50px ;
- position: fixed ;
- text-align: center ;
- width: 148px ;
- z-index: 1000 ;
- }
-
- div.fixed-n {
- left: 50% ;
- margin-left: -75px ;
- top: 0px ;
- }
-
- div.fixed-n-e {
- right: 0px ;
- top: 0px ;
- }
-
- div.fixed-e {
- margin-top: -25px ;
- right: 0px ;
- top: 50% ;
- }
-
- div.fixed-s-e {
- bottom: 0px ;
- right: 0px ;
- }
-
- div.fixed-s {
- bottom: 0px ;
- left: 50% ;
- margin-left: -75px ;
- }
-
- div.fixed-s-w {
- bottom: 0px ;
- left: 0px ;
- }
-
- div.fixed-w {
- margin-top: -25px ;
- left: 0px ;
- top: 50% ;
- }
-
- div.fixed-n-w {
- left: 0px ;
- top: 0px ;
- }
-
-
- /* -------------------------------------------------- */
- /* -- IE 6 FIXED POSITION HACK ---------------------- */
- /* -------------------------------------------------- */
-
- html,
- body,
- #site-body-container {
- _height: 100% ;
- _overflow: hidden ;
- _width: 100% ;
- }
-
- #site-body-container {
- _overflow-y: scroll ;
- _overflow-x: hidden ;
- _position: relative ;
- }
-
- div.fixed-position {
- _position: absolute ;
- }
-
- /* For the scrollbar. */
- div.fixed-n-e,
- div.fixed-e,
- div.fixed-s-e {
- _margin-right: 16px ;
- }
-
- /* For the scrollbar. */
- div.fixed-n,
- div.fixed-s {
- _margin-left: -83px ;
- }
-
- </style>
- </head>
- <body>
-
- <div class="fixed-position fixed-n">
- North
- </div>
-
- <div class="fixed-position fixed-n-e">
- North East
- </div>
-
- <div class="fixed-position fixed-e">
- East
- </div>
-
- <div class="fixed-position fixed-s-e">
- South East
- </div>
-
- <div class="fixed-position fixed-s">
- South
- </div>
-
- <div class="fixed-position fixed-s-w">
- South West
- </div>
-
- <div class="fixed-position fixed-w">
- West
- </div>
-
- <div class="fixed-position fixed-n-w">
- North West
- </div>
-
- <!-- ------- -->
- <!-- ------- -->
-
- <div id="site-body-container">
- <div id="site-body-content">
-
- <div style="height: 3000px ;">
-
- <p>
- Lorem ipsum dolor sit amet, consectetur
- adipiscing elit. Aliquam dictum enim in mauris
- luctus convallis. Aliquam erat volutpat.
- Suspendisse potenti. Duis blandit, urna vitae
- feugiat porttitor, risus est ornare metus, at
- dignissim urna velit id enim. Donec lectus nisi,
- consectetur eget sollicitudin id, bibendum
- laoreet velit.
- <p>
-
- </div>
-
- </div>
- </div>
-
- </body>
- </html>
You'll notice that the standards-compliant browsers still use "position: fixed". Only IE6 (with the help of the underscore ("_") hack since my IE doesn't allow conditional comments) falls back on this sub-content container work around. Because the content scrollbars are not part of the main window, our right-aligned and center-aligned "fixed" position elements need to take some additional margin into consideration to prevent overlapping with the content container's scrollbar.
Here is a screen shot of IE6 using the above code:
| | | | | |
| |  | | ||
| | | |
And, since this solution does not use any proprietary IE-based Javascript expressions, scrolling around the window does not lead to any jittering.
Download Code Snippet ZIP File
Post Comment | Ask Ben | Permalink | Other Searches | Print Page
Newer Post
My BFusion / BFLEX Keynote Address
Older Post
Using CSS Fixed Position Elements Across Browsers
Reader Comments
Nice article.
I want to add important note about this usage.
If !Doctype is not used, position:fixed doesn't work on Internet Explorer.
Nice solution.
It may interest you to watch this screencast (in Russian only, sorry) - http://www.artlebedev.ru/tools/technogrette/html/emulate-fixed/
Examples can be downloaded by clicking ??????? at the bottom of the page.
@Memiso,
I hope people are *always* using doctypes.
@Oleg,
Thanks, I'll take a look.
Doctype really cause lot's of issue with IE6
Is there any ways to disable scroll bar, because it is unnecessary.
@Anil,
I am not sure you can remove them when not necessary. I know you can add them when not necessary.
