问题描述
我有一个绝对定位的div，工作方式像一个工具提示。鼠标悬停在一个元素上，它显示，然后隐藏鼠标。我有几个< select> 元素放在工具提示元素上面的页面。在正常情况下，工具提示div将出现在选择标签上。但是当用户点击select标签并显示选项时，它会与工具提示重叠。
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;
}
推荐答案
a href =http://docs.webplatform.org/wiki/html/elements/option =nofollow> http://docs.webplatform.org/wiki/html/elements/option ）
As per the specifications (http://docs.webplatform.org/wiki/html/elements/option)
因此，z-index属性被忽略，默认行为是显示文档上所有元素的下拉列表。
And hence the z-index property is ignored and the default behavior is to show the drop down above all elements on the document.
这篇关于CSS：选择选项重叠绝对定位DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！