6Sep/030
Fixed Positioning in IE
Problem addressed
Fixed positioning is not supported in WIN IE
Solution
This has been fixed in IE 7, so this solution is only necessary if you need/wish to support older versions of WIN IE.
CSS
/* turn off scrolling for the body of the document */
html, body {overflow:hidden;height:100%;}
/* create a document box to allow the
fixed positioning of the layers, you don't have
to follow my naming convention */
div##sltDocument{position:absolute;
top:0px;left:0px;
height:100%;width:100%;
overflow:auto;z-index:1;}
/* create the fixed layer that will sit
on top of or underneath the document box */
div##sltFixed{position:absolute;
top:0px;left:0px;
height:40px;width:50px;z-index:2;}
HTML
<body>
<sltDocument>
Content and non-fixed portion of the layout goes here.
</sltDocument>
<sltFixed>
This layer will stay "fixed" in place.
</sltFixed>
</body>
Known Issues
The "fixed" layer will cover your pages scroll bars, if you align it right, or width 100%.
Background
There are five values for positioning using CSS2:
position:inherit, position:static,
position:relative, position:absolute, and position:fixed.
Unfortunately IE 6.x does not support position:fixed,
in fact WIN IE 5.0 will choke if you use position:fixed in a style sheet it can read.
But there is a way to emulate the effect of position:fixed using WIN IE proprietary features inside a
WIN IE specific style sheet: