According to the W3C CSS 2.1 specifications using z-index property for a positioned box element a stack level can be set and the element can be placed “behind” (far from user who faces the screen) or “in front of” (closer to the user) another element. In CSS 2.1, each box has a position in three dimensions, vertical, horizontal and a “z-axis” and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually. As a Web Designer you may face situations when elements create strange behavior on a particular web browser. Known situations can be an inaccessible anchor (link) (pointing the mouse cursor over it doesn’t produce any effect such as mouse pointer change and an action on user’s click), a background image which does not appear correctly and maybe the most common example a JavaScript drop down menu which produce a relevant effect on what “one element on top of the other” means. The z-index style property can be set on any integer value, positive or negative, and note that the greatest value draws the element in front of the other elements with smaller z-index value.

An example with three positioned division elements one on top of the other

Follow this link and you will see how z-indes style property places overlapped boxes. It presents three <div> elements, all positioned relatively inside the body container, and inside the first division element are three anchors also positioned relatively. These three containers overlap visually and they are one on top of the other. If the web browser you are using is standard complying according to W3C CSS 2.1 specifications the anchor Link2 and Link3 are not accessible because of the other two containers which are positioned on the top of first container and they cover those two anchors. Setting a value for the z-index style property, following the specifications, for the Link 2 and Link 3 anchors make them accessible and these links can be followed. The good browsers are Firefox v2 (and above) and Safari v3.1. The bad user agents are Internet Explorer v6 and v7 and unfortunately Opera v9.52. These last browsers don’t make any deference between the two situations, and wrongly display the positioned anchor elements.

Given Situation: HTML page was constructed using a division container which encapsulates three positioned division elements which are siblings on DOM tree, first one encapsulating three positioned anchor elements.

An overview for a dropdown JavaScript menu

Searching some information on the Internet, I landed on Sitecore Website. The layout is clean, the colors are well positioned and the information is presented in a professional way. First screenshot presents the landing main page.

Quite nice I might say. But, since the beginning they have a style issue in the presentation page. The white area over the dark grey background definitely has some text for visitors but, unfortunately the text and the background has the same color, white. Anyway, this does not have an important impact on users interaction as the menu has.
The menu, as you can see in the screenshot, it’s an unordered list with left floating elements on the top area of the page. Starting from this point, at user’s action mouse over, a sub menu is displayed, showing relevant links in site. Unfortunately it is not constructed well for all user agents and operating systems, and because the stack level for the sub menu is lower than the stack level for some heading (and other) elements, and when they are sharing the same screen area, the elements of the list in the sub menu are covered by the area of the heading element, and they are not displayed properly. The next screenshots show the undesirable behavior for the sub menu.

and another one …

and another one …

and the last one …

All screenshots present the sub menu which is not “in front of other elements” like the heading on top. The purpose for any menu is to create access to the website pages. If is interrupted in some way, many visitors will think negative about the intentions of the creator of the website.
Setting a value for the z-index style property for the container which holds the anchors of the sub menu will make it visible in front of any other page element.

Given situation: All screenshots were taken using Firefox v3.0.1 user agent on Ubuntu (Hardy Heron) operating system. The behavior described above is a particular situation for the given operating system and the user agent.