Some Applications of the CSS Fixed Positioning

Introduction
Do you have an HTML element, an image or video clip that you think is very important and most always be displayed on the web page independently of how the user is scrolling his web page? Are you looking for a solution to the problem posed by HTML frames to Search Engines? In this article I address these questions.

I wrote an article titled, Understanding CSS Fixed Positioning in this blog. I advise you to read that article before reading this one. To arrive at that article, type, Understanding CSS Fixed Positioning, with my name, Chrys, in the Search box of this page and click Search. If you have a Google Search box on this page, use it.

Note: This technology works only with new browsers.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Main Features of Fixed Positioning
With Fixed Positioning, an HTML element is kept fixed in the client area (viewport) while another is being scrolled. You can still keep all elements fixed in their positions with no one scrolling.

Fixed Positioning needs a CSS property called, "position". The value for this property is always, "fixed".

Fixed Positioning needs another CSS property called, z-index. The value to this property is an integer. HTML elements can actually be placed in front of one another, covering one another as seen by the web page user. Everything being equal, the BODY element is considered to be at a z-index value of zero. The elements placed in the BODY element normally are considered to be at a z-index value of 1. You can give elements z-index values from 2 upwards. The element with the greatest value is the one seen foremost by the user. The other elements may be covered by elements of higher z-indices.

Fixed Positioning needs the CSS top, left, bottom and right properties also.

Text HTML Elements
A user might be viewing a web page and you want the user to start a live chat as soon as possible. The pane to invite the user for the chat can have a fixed position. For another web page, you might want the user to register as soon as possible. So you can have a Link element blinking somewhere with the words "Register Now Free". Such as element can use fixed positioning. The following code illustrates this (try the code):

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

a {position:fixed; top:90%; left:80%; z-index:2; text-decoration:blink; font-weight:bold; font-size:larger}

text

text

text

text

text Register Now Free

Image
You may have an image for similar reasons to the text elements above. Use the image tag in place of the text element in the above code. The image can be made into a link or be given an onclick event.

Video
If you have a web site that is talking about films, you might want a video clip to be showing while the web page reader is reading some text. Use the HTML Object element for this, with the CSS properties. You can keep a video clip fixed for other reasons.

Problems posed by Frames
Search engines do not work well with pages that have HTML Frames. HTML frames serve two purposes: 1) To keep a panel of the web page fixed while another is scrolled. 2) To keep a panel fixed, while a web page is downloaded and displayed in another panel, replacing a previous HTML document.

Fixed positioning can be used for the first purpose.

These are uses of the CSS Fixed Positioning feature that I have been able to gather.

Chrys