Maybe you have a dynamic menu with dropdown sub-pages that are being hidden by other layers in your web site. After coming across this web design issue several times and spending many hours trying to get the z-index value to help me position the layers of web pages… I came across some useful web design tips relating to layers and positioning.

Only relatively positioned elements can be given a z-index value

If an element is not relatively positioned any z-index value will be ignored. Make sure that the container holding your hiding element has a position:relative; style definition.

Both the hidden div and the blocking div must be in the same container

It took me quite a while to get in the habit of checking this. You can set z-index values of your relatively positioned divs all day long and it won’t mean a thing if the 2 conflicting divs are in separate containing divs. The div containing the hidden layer and the div blocking the hidden layer must be inside one common parent div.

If we have a dynamic navigation menu div area, the main html layout might look like this:

If the MENU items are dropping behind the main CONTENT div you must wrap both divs in one container:

Then you an go ahead and add some z-index values to your CSS stylesheet like so:

#wrapper {position:relative;z-index: 100;}
#menu {position:relative;z-index:200;}

What is z-index / z-order?

The z-order of a web page element tells where it fits in the order of layers from back to front. Layers with higher z-index values will show on top of those divs with lower z-index values. Referring to the example above, the default z-index for a web page is typically 0 or 1, so we give our WRAPPER div a higher z-index value just to be safe. Then we give the MENU div an even higher z-index value to make sure it will not be hidden behind the main CONTENT.