Some Applications of the CSS Fixed Positioning

Google+ Pinterest LinkedIn Tumblr +

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, text), just contact me at 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):


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





text Register Now Free

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.

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.



About Author

Leave A Reply