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