Emulating Position: Fixed;

IE can't handle position: fixed. What follows is the CSS and HTML necessary to emulate the behaviour of fixed positioning in Internet Explorer. It works by removing the page's scrollbars and placing them on a container that takes up the whole window. You may then position elements that are not inside the container absolutely, and since the body never actually scrolls they will appear fixed.


					<head>

					   <style media="all" type="text/css">

					      html, body {

					         height: 100%; overflow: hidden;

					      }

					      #container {

					         height: 100%;  overflow: auto; position: relative; z-index: 2;

					      }

					      #div1 { position: absolute; top: 0; left: 0; z-index: 1; }

					      #div2 { position: absolute; top: 0; right: 0; z-index: 1; }

					      #div3 { position: absolute; bottom: 0; right: 0; z-index: 1; }

					      #div4 { position: absolute; bottom: 0; left: 0; z-index: 1; }

					   </style>

					</head>

					<body>

					   <div id="container">

					      <div id="content">

					         <h1>Emulating Position: Fixed;</h1>

					         <p>...</p>

					         <code>...</code>

					         <h2>Limitations</h2>

					         <p>...</p>

					      </div>

					   </div>

					   <div id="div1" class="cornerBox"><p>div id="div1"</p></div>

					   <div id="div2" class="cornerBox"><p>div id="div2"</p></div>

					   <div id="div3" class="cornerBox"><p>div id="div3"</p></div>

					   <div id="div4" class="cornerBox"><p>div id="div4"</p></div>

					</body>

Limitations

The divs on the bottom do not appear to be flush with the bottom of the window. With jadeleeauthor.com, since the items at the bottom were simply decorative, I just sunk them down below the bottom. For more serious content a better solution would be needed.

Another more significant limitation is that, depending on how you set the z-index, the container's scrollbars either overlap or appear covered by div2 and div3. This means that the design is altered slightly depending upon the length of the content and the height of the browser window. Again, this can work if the elements are decorative, but I am still looking for better options.

This technique disables the scroll wheel in Firefox, so it would be wise to use position: fixed for modern browsers, and then put this hack in place for IE uing conditional comments. That is what I did for jadeleeauthor.com. If you do this then the above limitations will only be present in IE.

Back to Divine Blog