Stacking Order

Question: I have tried using your javascript tooltip code and have got it working successfully. However, the tooltip does not appear on top of drop down select menus. It displays correctly with other objects such as text boxes and buttons (ie the top most layer) but select drop down menus appear above it. Any help would be greatly appreciated.
Richard Coombes

Answer:In the tooltip.css file you will see the text "z-index:100;". The z-index is what determines what displays in front of what. You should be able to find a similar entry for your drop down menus that will have a number greater than 100 associated with it. If the value is coded within the drop down menu Javascript it will be called zIndex instead of z-index (which is the CSS name for it). To make the tool tip appear in front of the drop down menu you need to make the z-index for the tool tip larger than the z-index for the drop down menu either by making the tool tip z-index larger, the drop down menu z-index smaller, or both.

Note to other readers: Although this question relates to my Tooltip script, the same z-index (or zIndex) value field determines the stacking order of all absolute positioned entries on your page.

Richard later replied to my above response to advise that he had found information about a supposed bug in Internet Explorer relating to stacking order. Apparently any select elements you define will have their zIndex ignored by the browser and will always be displayed in front of everything else on the page. Other form input fields may also not perform quite as you would expect with stacking. Upon further investigation I have found that Netscape 4 and Opera 6 also suffer from this same problem for select boxes and Opera 6 also has the problem with other form fields (Netscape 6 and Opera 7 both allow you to place things in front of all form fields including select).

A Solution

Another visitor to this site who struck the same problem came up with the idea of altering the script to hide all of the select fields in the form when displaying a tooltip. Unfortunately his solution crashed the page processing in Netscape 4 leaving the tooltip permanently displayed behind the drop down list. Netscape 4 does not allow you to place div tags within a form and so the only way to handle it is to toggle the visibility of the entire form.

To hide the form when displaying something over the top you first need to add the following stylesheet code:

.fo {position:relative;visibility:visible;};

You also need to add the following javascript (just the bold part at the end if you have the tooltip javascript in front of it as the tooltip script already includes the first part):

var DH = 0;var an = 0;var ai = 0;if (document.getElementById) {ai = 1; DH = 1;}else { browserVersion = parseInt(navigator.appVersion); if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {an = 1; DH = 1;}} function fd(oi,ws) {if (ws == 1) {if (ai) return (document.getElementById(oi).style); else if (an) return (document.layers[oi]);} else if (ai) return (document.getElementById(oi)); else {if (an) {return (document.layers[oi]);}}
function popOut(oi) {if (DH) {ds = fd(oi,1); st = ds.visibility; if (st == "visible" || st == "show") ds.visibility = "hidden"; else ds.visibility = "visible";}}

Next, place <div id="s1" class="fo"> immediately in front of the <form> tag and </div> immediately after the </form> tag - not anywhere within the form or Netscape 4 will permanently hide the enclosed code. Finally change the mouseover and mouseout calls on the link to read ="popOut('s1');popUp(event,'t1');" (where s1 is the id of the div containing the form and t1 is the id of the tooltip).

I would suggest that the simpler solution is to not attempt to place anything in front of any form fields.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow