Understanding CSS Fixed Positioning
76Introduction
CSS Fixed Positioning allows you to keep some HTML elements in their position in the client area of the web page, while another element is being scrolled. I show you how to achieve that in this article. This technology works with the latest versions of major browsers. It does not work with old browsers. By “latest browsers” I am referring to browsers that were produced within the last three years.
You need basic knowledge in CSS and HTML (XHTML) in order to understand this article.
Main Features of Fixed Positioning
With Fixed Positioning, an HTML element is kept fixed in the client area (viewport) while another is being scrolled. Note: 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 upward. 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 top, left, bottom and right CSS properties; I will explain these below. Try the following example first to appreciate what is going on before we continue (use your own image). Scroll up and down the page and note that the image remains fixed at its position.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
img {position:fixed; top:75%; left:75%; z-index:2}
</style>
</head>
<body>
<img src="myImage.gif" />text <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />text <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />text <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />text <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />text
</body>
</html>
The element to be kept fixed can be typed any where in the code. It is the CSS rule that determines its exact fixed position at the browser. There is one CSS rule in the above code and it is for the image. In it, note the position property with the value, “fixed”. There is the top and left properties. The value of the top property is 75%. This is 75% the height of the client area measured from the top edge of the client area. The value of the left property is 75%. This is 75% the width of the client area measured from the left edge of the client area. The rule has a z-index value of 2; this is under the assumption that no other element has a z-index property above 1. In that way it will always be in front all the other elements.
CSS Properties for Fixed Positioning
position
This property takes the value, “fixed” meaning you want fixed positioning
top
The value here is a number in px or percentage. Other units can be used. This is a vertical distance from the top edge of the client area, to the top content edge of the element being placed.
left
The value here is a number in px or percentage. Other units can be used. This is a horizontal distance from the left edge of the client area, to the left content edge of the element being placed.
right
The value here is a number in px or percentage. Other units can be used. This is a horizontal distance from the right edge of the client area, to the right content edge of the element being placed.
bottom
The value here is a number in px or percentage. Other units can be used. This is a vertical distance from the bottom edge of the client, to the bottom content edge of the element being placed.
z-index
This is the z-index position of the element (layer). The value is a whole number (integer). When the z-index is absent, a value of 2 may be assumed.
The auto value
The top, left, bottom and right properties can take the value “auto”. With this value, the browser chooses a suitable distance for you. This value can also be used for the width or height of any element; again the browser chooses a suitable width or height value for you.
Web Page without Scrolling
The following example code shows a web page that does not need the vertical and horizontal scroll bars. It is partitioned into 4 divisions, with DIV elements. One of the DIVs is the header. Another is the sidebar that can take hyperlinks. The other takes the main content of the web page. The last one is the footer. The success of this partitioning is thanks to the CSS Fixed Positioning feature.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
#header {position: fixed; width: 100%; height: 15%; top: 0; left: 0; border:solid 1px blue}
#sidebar {position: fixed; width: 20%; height: 75%; top: 15%; left: 0; border:solid 1px blue}
#main {position: fixed; width: 80%; height: 75%; top: 15%; left: 20%; border:solid 1px blue}
#footer { position: fixed; width: 100%; height: 10%; top: 90%; left: 0; border:solid 1px blue}
</STYLE>
</HEAD>
<BODY>
<DIV id="header"> Hearder </DIV>
<DIV id="sidebar"> Sidebar for links </DIV>
<DIV id="main"> Main Content goes here </DIV>
<DIV id="footer"> Footer </DIV>
</BODY>
</HTML>
Try the above code. If you add the percentage values for the different DIVs you will have 100% for the total width or height of the client area; this avoids overlapping of the DIVs.
The above web page would have very little content. If you want a lot of content, then you would include scroll bars for one or more of the DIVs. The following code is a repetition of the above, but with scroll bars. The “overflow:scroll” property and value have been used for this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
#header {position: fixed; width: 100%; height: 15%; top: 0; left: 0; border:solid 1px blue; overflow:scroll}
#sidebar {position: fixed; width: 20%; height: 75%; top: 15%; left: 0; border:solid 1px blue; overflow:scroll}
#main {position: fixed; width: 80%; height: 75%; top: 15%; left: 20%; border:solid 1px blue; overflow:scroll}
#footer { position: fixed; width: 100%; height: 10%; top: 90%; left: 0; border:solid 1px blue; overflow:scroll}
</STYLE>
</HEAD>
<BODY>
<DIV id="header"> Hearder </DIV>
<DIV id="sidebar"> Sidebar for links </DIV>
<DIV id="main"> Main Content goes here </DIV>
<DIV id="footer"> Footer </DIV>
</BODY>
</HTML>
Try this code.
Note: Usually, when you use the top and left properties, you do not need the bottom and right properties and vice-versa. This is on condition that you give the fixed element width and height values.
Note also that the fixed element can be inline or block-level.
What happened in the Past
In the past without the Fixed Positioning feature, to keep an element fixed, you have to write a script code, based on proprietary browser features. What was achieved as fixed element was not stable. As you scroll the web page, the supposed fixed element vibrates about its position. You might have seen this on some web sites. Today the element meant to be fixed is stable with the CSS Fixed Positioning declaration block and does not vibrate as you scroll.
Conclusion
Fixed Positioning keeps an element fixed within the client area of the web page. You need the position property with the “fixed” value for this. You also need the left, top, right, bottom and z-index properties. In many situations, you would not need all these properties together, but you will always need the position property with the “fixed” value. This technology works with new browsers and not old browsers.
Chrys
PrintShare it! — Rate it: up down flag this hub
