Overriding Z-Index for a Select (dropdown)

Tygh used Ask the Experts™
I have a menu that drops down on my screen from my header.  The problem is when it drops over a select object, the select object shows through.  Is there some way to lower the precedence of the select so the menu is on top always?

Thanks a bunch
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Yes - use a better browser.

The usual hack for this situation is to use JavaScript to change the select element to display: none; when the menu is supposed to cover it, and then put it back afterwards.
Top Expert 2013

The z-index of the select is infinity and you cannot cannot change that behaviour.  the workarounds are:

1.  Put it in a layer and hide it when it is in the way.
2.  Put it in a layer and move it out of the way when necessary.
3.  Re-design the page to elimnate teh conflict.

If you are concerned about presentation only, then you can create a div that looks like a select and then it will participate in the stacking, but it will not be functional as a select.  To get both look and functionality from a div, take a bunch of scripting and I have not seen one yet that works reliably without cross-browser problems./

Top Expert 2013
You can try something like this if you just need to have the look and feel of a select:

   .selectBOX {border:3px ridge #dddddd;height:75;width:125;overflow-y:scroll;
               border-right:3px double #bbbbbb; border-bottom:3px double #bbbbbb;}
   .hiliteON {color:white;background-color:navy;font-family:arial;font-size:10pt}
   .hiliteOFF {color:black;background-color:white;font-family:arial;font-size:10pt}
<script language="JavaScript">
   var lastone=false;
   function chgcls(EL)
      if (lastone)
<h1 align="center"> Fake Form Elements </h1>
<div class="selectBOX"><!-- style="position:absolute;left:165;top:115" -->
   <table border=0 cellspacing=0 cellpadding=0>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">Alberta</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">Ontario</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">Quebec</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">Newfoundland</td></tr>
      <tr><td class="hiliteOFF" onClick="chgcls(this)">all fake</td></tr>
        Even though the fake select is not a functional form element, we
        could still capture the cell value with the onClick event and use
        it for processing

Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!



I wrote the following for the exact reason you've found -- feel free to use/modify it if it suites your needs.


As stated at the above url, it's designed solely for IE and if you are willing to take a dhtml approach to the problem then dynamically inserting a normal select for !document.all isnt that much more of a stretch.

Hope that helps.


I'm guessing from the lack of response on this one that none of the proposed solutions are acceptable. Given that, along with my current mission of converting everything on my site to standards compliance, I've given that dhtml select an XHTML doctype and made a couple of slight modifications to allow it to work in any standards compliant browser.

The url remains the same: http://slayeroffice.com/code/dhtml_select.html

the best solution is:

every <div>menu item</div> will be own iframe.

<div id="menu1" >

try this:
<iframe id="menu1" src=menu1.html></iframe>

iframe have visibility too, but will be over the edropdowns :)
Yes, it is possible, without removing the select-box, and without using 'ugly' JavaScript-tricks. It's not a realy clean way of programming, but it works in both IE5.5 and Mozilla 1.4b: Both browsers will show a DIV-object above a Select-box.

The way to do it:

- Create a DIV
- Create an IFRAME inside that DIV with a bit smaller size than the DIV because of the borders of the IFRAME; they will be visible otherwise
- Create another DIV, align that one on top of the first DIV
- Put the dropdown-menu inside that last DIV.

That will make the dropdown-menu on top of the select-box.
put an iframe behind your menu, set the zindex of the iframe to 1, set the zindex of the menu to 2.  The iframe goes infront of the select, the menu goes in front of the iframe.  Assuming your menu is labeled "id":

<iframe style="position:absolute;visibility:hidden;width:0px;height:0px;" frameborder="0" id="iFrameHelper"></iframe>

HelperFrame = document.getElementById('iFrameHelper').style;
HelperFrame.pixelLeft  = id.style.pixelLeft;
HelperFrame.pixelTop   = id.style.pixelTop;
HelperFrame.width      = id.offsetWidth;
HelperFrame.height     = id.offsetHeight;
HelperFrame.visibility = "visible";
HelperFrame.zIndex     = zI++;

I'd argue that I did answer his question since the solution I gave works perfectly and is exactly what he needs (even if it's not exactly what he asked for)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial