18

I have an absolute positioned div which works like a tooltip. On mouse over of an element it shows and then hides at mouse out. I have few <select> elements in the page which is placed above the tooltip element. In normal case the tooltip div will appear over the select tag. But when a user clicks on select tag and the options are shown, it overlaps the tooltip. Giving a higher z-index for select or options tag did not work.

enter image description here

Here is a sample code to illustrate the problem.

<body>
<h1>Select Options Overlapping Absolute Positioned DIV</h1>

<select name="some-name">
    <option>United States</option>
    <option>Canada</option>
    <option>Mexico</option>
    <option>Japan</option>
</select>

<div id="top-layer">
   <h2>Overlapping Div</h2>
</div>
</body>

CSS

select, options{ z-index:10;}

#top-layer { 
   background:#ccc; 
   color:#000; 
   border:solid 1px #666; 
   position:absolute; 
   top:45px; 
   left:70px; 
   z-index:100;
}
peterh
  • 11,875
  • 18
  • 85
  • 108
Sandeep Paul
  • 203
  • 1
  • 3
  • 6
  • This in all browsers? or just Explorer? What version? In early versions of explorer (< v6), form elements "poke through" and the common fix is shim with an iframe. See: [iframe shimming or ie6 and below select z-index bug](http://stackoverflow.com/questions/224471/iframe-shimming-or-ie6-and-below-select-z-index-bug) – steveax Nov 18 '11 at 20:04
  • why not position your tooltip off to the side of the select. that way, that won't happen. – Joseph Nov 18 '11 at 20:16
  • 1
    This is not the issue of select tags overlapping in IE6. Only the options inside the select tag will appear above the div. It does not work in Firefox, IE8, IE9 and Chrome. haven't tested in any other browser. @fskreuz Tooltip is added dynamically, so it could appear anywhere in the page. – Sandeep Paul Nov 19 '11 at 00:49
  • @SandeepPaul: why would a tooltip overlap the select? what comes in my mind is that tooltips only appear during mouse over events. i assume that tooltip is from the select that's why i said "put it off to the side".. hmm.. – Joseph Nov 20 '11 at 01:04
  • @fskreuz tooltip will appear only at mouse over. If you look at the default behavior of the select tag, it keeps the list(options) open until you click on the list or anywhere else on the page. So this list is now open and you mouse over an element which has that tooltip. Now the select drop down overlaps over the tooltip. – Sandeep Paul Nov 23 '11 at 00:46
  • What are you using to display your tooltip? I have the same issue and am using [clueTip](http://plugins.learningjquery.com/cluetip). – WynandB Sep 20 '13 at 02:25

5 Answers5

3

As per the specifications (http://docs.webplatform.org/wiki/html/elements/option)

Except for background-color and color, style settings applied through the style object for the option element are ignored.

And hence the z-index property is ignored and the default behavior is to show the drop down above all elements on the document.

Mohammed Muchhala
  • 31
  • 5
3

No element will apply the z-index value without also having a position attribute (absolute, relative, fixed, etc).

Try adding position:relative to your select so that it inherits a z-index value.

See this screencast for a more in depth explanation.

Damon Bauer
  • 2,718
  • 1
  • 22
  • 35
2

This works (using jquery - should be called on the mouseover event):

var $select = $("select").blur();
if ($.browser.webkit) {
  $select.hide();
  setTimeout(function() {
    $select.show()
  }, 5);
}

blur seems to suffice in IE7-9 and FF. Webkit doesn't respect this (bugs are filed against this), so the solution seems to be to hide and show the select box quickly.

ScottE
  • 21,530
  • 18
  • 94
  • 131
0

Try:

form, select, options{ z-index:10;}

Perhaps the form tag is giving it the overlay. It should work as you have it, as IE does take into account z-index.

Regards, -D

Downpour046
  • 1,661
  • 9
  • 14
-1

Hiding Select through script is the current option available

Sopo
  • 1,577
  • 3
  • 16
  • 28