DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum VIII (v3.08) | 4

Hierarchical Menus Ver. 3 - Addendum VIII (v3.08)
adjustments for five minor issues

The Problem Demonstrated

Pass your mouse over the link below left to display menu tree.

Menu Example:

If you are using Navigator, the menu will appear, over the green element. In Explorer, the menu will appear under the green element. Why? Because, the two browsers handle automatic assignment of z-index in a completely different way! Surprise, surprise.

Refresher

Elements with a higher z-index appear above elements with a lower z-index. If two or more elements have the same z-index, then the stacking order is determined by element creation order. An element is above all elements, with the same z-index, created before it. A simple example can be found in our menu script. We do not assign a z-index. Child menus appear over parent menus because they are created after the parent menus.

Navigator and z-index

In Navigator, if you omit the z-index of a new positioned element, it is automatically assigned the same z-index as the element with the highest z-index on the page. And since the new element is created after the existing one, the new one appears over the existing one. In other words, Navigator assumes that any new element should be placed over all elements in the page, unless otherwise specified. If you are using Navigator the two form inputs, above, should both read 100, even though the menu elements were not given z-index assignments.

Explorer and z-index

Explorer thinks differently. It gives all elements a z-index of 0, unless otherwise specified. All new elements, without a specified z-index, are placed above all existing elements that did not have a z-index specified. If you want a new element to appear above all elements in the page, you must ensure that it is assigned a z-index value higher than all other elements. If you are using Explorer the two form inputs, above, should read 100 and 0.

The Menus and z-index

Both methods have advantages and disadvantages. As far as our script is concerned, we would have preferred Explorer to behave in the Navigator fashion, since we always want the menus to appear above other elements, and we want to do this with as little code as possible.

Since more and more pages are being written with positioned elements, we must account for other positioned elements on a page with a specified z-index. So, let's ensure that our menu elements are assigned a higher z-index.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Aug 24, 1999
Revised: Aug 24, 1999

URL: https://www.webreference.com/dhtml/column21/addendum8/col21addVIII2.html