如何选择重叠绝对定位DIV的选项？ [英] How to select options overlapping an absolute positioned DIV?
问题描述
我有一个绝对定位的div，它像一个工具提示一样工作。鼠标悬停在某个元素上，然后隐藏在鼠标外面。在放置在工具提示元素上方的页面中，有几个< select> 元素。在正常情况下，tooltip div将出现在select标签上。但是，当用户点击选择标签并显示选项时，它将与工具提示重叠。为选择标签或选项标签提供更高的z-index无效。
下面是一个示例代码来说明问题。
<身体GT;
< h1>选择选项重叠绝对定位DIV< / h1>
< select name =some-name>
< option>美国< / option>
< option>加拿大< / option>
< option>墨西哥< / option>
< option>日本< / option>
< / select>
< div id =top-layer>
< h2>重叠Div< / h2>
< / div>
< / body>
CSS
select，options {z-index：10;}
＃top-layer {
background：#ccc;
颜色：＃000;
border：solid 1px＃666;
位置：绝对;
top：45px;
left：70px;
z-index：100;
a href =http://docs.webplatform.org/wiki/html/elements/option =nofollow> http://docs.webplatform.org/wiki/html/elements/option ）
除背景颜色和颜色外，通过选项元素的样式对象应用的样式设置将被忽略。 $ b
因此z-index属性被忽略，默认行为是在文档上的所有元素上方显示下拉菜单。
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.
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;
}
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.
这篇关于如何选择重叠绝对定位DIV的选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
