Question

我有一个绝对定位的div，就像工具提示一样。鼠标悬停在它显示的元素上，然后隐藏鼠标。我在页面中有很少<select>个元素放在工具提示元素上方。在正常情况下，工具提示div将显示在选择标记上。但是，当用户单击选择标记并显示选项时，它会与工具提示重叠。为select或options标记提供更高的z-index不起作用。

enter image description here

以下是说明问题的示例代码。

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

Answer 1

如果没有z-index属性（绝对，相对，固定等），任何元素都不会应用position值。

尝试将position:relative添加到select，以便它继承z-index值。

See this screencast for a more in depth explanation.

Answer 2

根据规格（http://docs.webplatform.org/wiki/html/elements/option）

除背景颜色和颜色外，通过选项元素的样式对象应用的样式设置将被忽略。

因此忽略了z-index属性，默认行为是在文档上的所有元素上方显示下拉列表。

Answer 3

这是有效的（使用jquery - 应该在mouseover事件上调用）：

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

在IE7-9和FF中，

模糊似乎就足够了。 Webkit不尊重这个（针对此提出了错误），因此解决方案似乎是隐藏并快速显示选择框。

Answer 4

尝试：

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

表格标签也许给它叠加。它应该像你一样工作，因为IE确实考虑了z-index。

此致 -D

Answer 5

隐藏选择通过脚本是当前可用的选项

如何选择与绝对定位DIV重叠的选项？

5 个答案: