created: September 06, 2003 - modified: June 10, 2008

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: