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

【问题标题】：How to select options overlapping an absolute positioned DIV?如何选择与绝对定位 DIV 重叠的选项？
【发布时间】：2012-01-01 13:36:48
【问题描述】：

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

这里有一个示例代码来说明问题。

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

【问题讨论】：

所有浏览器都有这个？还是只是探险家？什么版本？在资源管理器的早期版本（iframe shimming or ie6 and below select z-index bug
为什么不将您的工具提示放在选择的一侧。那样就不会发生。
这不是 IE6 中选择标签重叠的问题。只有选择标签内的选项才会出现在 div 上方。它不适用于 Firefox、IE8、IE9 和 Chrome。没有在任何其他浏览器中测试过。 @fskreuz 工具提示是动态添加的，因此它可以出现在页面的任何位置。
@SandeepPaul：为什么工具提示会与选择重叠？我想到的是工具提示仅在鼠标悬停事件期间出现。我认为工具提示来自选择，这就是为什么我说“把它放在一边”.. 嗯..
@fskreuz 工具提示只会在鼠标悬停时出现。如果您查看 select 标记的默认行为，它会保持列表（选项）打开，直到您单击列表或页面上的任何其他位置。所以这个列表现在是打开的，你将鼠标悬停在具有该工具提示的元素上。现在选择下拉菜单与工具提示重叠。

标签： html css positioning z-index

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

blur 似乎在 IE7-9 和 FF 中就足够了。 Webkit 不尊重这一点（对此提出了错误），因此解决方案似乎是快速隐藏和显示选择框。

【讨论】：

【解决方案3】：

根据规范 (http://docs.webplatform.org/wiki/html/elements/option)

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

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

【讨论】：

【解决方案4】：

试试：

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

也许表单标签给了它覆盖。它应该可以正常工作，因为 IE 确实考虑了 z-index。

问候， -D

【讨论】：

即使为z-index 标签指定z-index 也不起作用。

【解决方案5】：

没有position 属性（绝对、相对、固定等）的元素将应用z-index 值。

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

See this screencast for a more in depth explanation.

【讨论】：

即使在将position:relative 设置为select 和options 之后，它也不起作用。
您是否将选择的 z-index 也更改为高于弹出窗口？
我将工具提示的 z-index 设置为高于 select。