Bookmark and Share

CSS Positioning

See the absolute positioning demo.

An absolutely positioned element establishes a containing block for any elements within it. Descendent elements follow the same positioning rules they normally would, just offset by the position of the containing element.

They can even contain other absolutely positioned elements. These descendents are likewise removed from the normal flow within the containing block, so they can appear outside of the bounds of the containing element. This can be seen in the demo.

Fixed Positioning

Fixed positioning is a special case of absolute positioning. For fixed elements, the containing block is always taken to be the viewport of the browser window. A fixed element does not move when a web page is scrolled as all other elements do.

In printing, a fixed element should be printed on every page.

Internet Explorer and Netscape 6.0 do not support fixed positioning. They do, however, support fixed backgrounds (via the background-attachment property) which produces a similar effect but only for background images.

Netscape 6.1 does support fixed positioning on elements, as does Opera 5.

Stacking Order

Absolutely positioned elements may overlap non-positioned elements and each other. Two things determine when one appears in front of or behind another, the stacking context and the z-index property.

Each absolutely positioned element belongs to a stacking context. The initial containing block generates an initial stacking context. Absolutely positioned elements within the same stacking context are displayed according to their z-index value.

An element with a higher z-index appears in front of an element with a lower z-index. When two elements have the same value (or if neither has been assigned a value) the source order is used. The element that is defined earlier in the source is displayed behind the one defined later.

Negative values can be specified for z-index. An element with a negative value is displayed behind any with an undefined or positive z-index value in the same stacking context.

Internet Explorer 5.5 and Opera 5 do not properly handle negative z-index values. Netscape 6 does but rendering errors can occur.

An absolutely positioned element can create a local stacking context which applies to absolutely positioned elements within it. These descendent elements are stacked among themselves according the the same rules as before.

See the stacking order demo.

But when any overlap an element in a different stacking context, they are displayed either behind or in front of it depending on the stack level of their containing element. In other words, their z-index value applies only to elements in the same local stacking context. Otherwise the z-index value of the containing element is used. A simple demo illustrates the idea.

A local stacking context is created when an absolutely positioned element is given a z-index value other than auto. Any absolutely positioned elements nested within the element participate in that local stacking context.

In Internet Explorer 5.5 and Netscape 6.0, an absolutely positioned element always creates a local stacking context for its descendants, even if z-index is set to auto. Opera 5.0 handles the situation correctly as far as stacking order but positions the descendent elements incorrectly.

Overlaping Form Controls and Plug-ins

IE 5.5 Screenshot

Some elements cause display problems when overlapped by positioned elements. An example of this is shown in the image at right, taken from IE version 5.5. This can occur when elements overlap form controls, applets or plug-in displays like Flash.

It happens because browsers may let other programs handle the display of these elements, like a plug-in or the operating system. Even setting the z-index will not help. These other programs control that space and will simply draw on top of whatever the browser renders.

Which elements "bleed through" depends on the browser. Netscape 6 and IE 5.5 manage all form controls themselves, except for SELECT elements. With IE, these will display on top of any other content. With Netscape, the select box itself works as expected but the scroll bar will bleed through if the SIZE attribute is greater than one. Opera 5.0 has this problem with all form elements.

This cannot be fixed. Your only recourse is to try to avoid overlapping such elements. In some cases, you might know or be able to dynamically detect an overlap and hide the offending element from view by setting its style via scripting using settings like visibility:hidden or display:none.

Conclusion

Even though this is just a brief overview, you can see that many details go into how a browser renders page content. And this information deals just with positioning. Stylings, form controls and dynamic content changes via scripting can complicate matters even more.

Even when browsers follow the standards, there is plenty of room for error. All software has bugs and specifications can't cover every possible situation.

When designing layouts, code validators can be helpful in finding simple errors like unmatched HTML tags or syntax errors in style sheets. Sometimes it helps to build a small test case and view it in several different browsers or configurations to pin down a particular problem.