Categories:

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.

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. More complicated scenarios such as creating a Parallax effect cannot make do without DHTML's help.

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