How to select options overlapping an absolute posi

2019-03-12 09:31发布

站内问答 / HTML/CSS
473 5 6

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;
}

5条回答
Melony?
2楼-- · 2019-03-12 10:09

Hiding Select through script is the current option available

查看更多
0人赞 添加讨论(0) 举报
Evening l夕情丶
3楼-- · 2019-03-12 10:12

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.

查看更多
0人赞 添加讨论(0) 举报
兄弟一词,经得起流年.
4楼-- · 2019-03-12 10:22

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.

查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
5楼-- · 2019-03-12 10:25

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.

查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
6楼-- · 2019-03-12 10:34

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)