Categories:
Partners
 

The CSS alternative: position:fixed

An alternate method for statically positioning elements that no doubt will eventually become mainstream is through CSS (level 2+). CSS2 supports the definition position:fixed, which in itself locks in the position of its applied element on the screen. For example:

<style style="text/css">
#staticcontent{
position:fixed;
left: 10px;
top: 5px;
}
</style>

<div id="staticcontent" style="width: 135px">
This content stays perfectly static on the screen, but only in Firefox.
As of IE6, IE doesn't support it.
</div>

Here we have content that is displayed absolutely and statically on the screen (coordinates (5,65). Apart from the obvious advantages of ease of implementation and shortness in code, content statically locked in using CSS remains truly static, without any potential "jumpiness" occurring while scrolling the page.

Browser compatibility

Yes, here comes the dreaded browser compatibility section. Our beloved CSS attribute position:fixed is currently only supported by a very limited number of browsers, noteworthy ones being Firefox/ NS6+ and Opera7+. IE6 does not yet support "position: fixed", though IE7 most likely will change this.

Before you try to use the knowledge on this page to invalidate the rest of the tutorial, remember that CSS atmost is a part of DHTML, not a replacement. Slightly more complicated scenarios such as statically position a content at the right edge of the window or at the very bottom all require some help from DHTML.

Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.

This content stays perfectly static on the screen, but only in Firefox. As of IE6, IE doesn't support it.