 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.
|
