HTML 选择下拉选项 Z-index
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9210725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Select Drop Down Option Z-index
提问by Gurvinder
I have a simple select drop down when I am going to select an option there is Menu navigation item, so now when I am going to hover on menu items navigation is going back to select option list which is open. It's happening in all browsers. I don't know whether it's a bug or what. Steps are:
当我要选择一个选项时，我有一个简单的选择下拉菜单，有菜单导航项，所以现在当我要悬停在菜单项上时，导航将返回到打开的选择选项列表。它发生在所有浏览器中。不知道是bug还是什么。步骤是：
- Open select dropdown options
- Same time hover on navigation menu items
- Now the navigation items are going behind the option list (not behind the select tag)
- 打开选择下拉选项
- 同时悬停在导航菜单项上
- 现在导航项在选项列表后面（不在选择标签后面）
I have tried giving z-index with positions. But nothing is working. I think its not an issue but need explanation on same. Any suggestions will be greatly appreciated.
我试过给 z-index 提供位置。但没有任何效果。我认为这不是问题，但需要对此进行解释。任何建议将不胜感激。
This is the sample code:
这是示例代码：
<style type="text/css">
/* #################### Navigation bar CSS styling ################## */
.mynavbar {
position: relative;
width: 100%;
height: 23px; /* corresponds to 'line-height' of a.navbartitle below */
margin: 0; border: 0; padding: 0;
background-color: #666633;
}
a.navbartitle {
display: block;
float: left;
color: white;
background-color: #666633;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 0; border: 0; padding: 0;
line-height: 23px; /* corresponds to 'top' value of .submenu below */
text-align: center;
text-decoration:none;
}
a.navbartitle:hover {
background-color: #447755;
}
/* menu title widths */
#t1 { width: 104px; }
#t2 { width: 100px; }
#t3 { width: 102px; }
#t4 { width: 102px; }
#t5 { width: 180px; }
/* We just specify a fixed width for each menu title. Then, down below we specify
a fixed left position for the corresponding submenus (e.g. #products_submenu, etc.)
Using these fixed values isn't as elegant as just letting the text of each
menu title determine the width of the menu titles and position of the submenus,
but we found this hardwired approach resulted in fewer cross-browser/cross-OS
formatting glitches -- and it's pretty easy to adjust these title widths and the
corresponding submenu 'left' positions below, just by eyeballing them whenever
we need to change the navbar menu titles (which isn't often). */
.submenu {
position:absolute;
z-index: 2;
top: 23px; /* corresponds to line-height of a.navbartitle above */
padding: 0; margin: 0;
width:166px; /* If adjust this, then adjust width of .submenu below a too */
color: white;
background-color: #666633;
border: 1px solid #447755; /* box around entire sub-menu */
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 11px;
}
/* Fix IE formatting quirks. */
* html .submenu { width: 148px; } /* IE needs narrower than width of .submenu above */
/* End */
/* position of each sub menu */
/* We just eyeball the position of each submenu here -- can move left or right as needed.
If you adjust menu title text, you might want to adjust these too. */
#products_submenu { left: 0px; visibility: hidden; }
#services_submenu { left: 104px; visibility: hidden; }
#funstuff_submenu { left: 204px; visibility: hidden; }
#aboutus_submenu { left: 306px; visibility: hidden; }
#contact_submenu { left: 408px; visibility: hidden; }
/* Note, each submenu is hidden when the page loads - then made visible when
the mouse goes over the menu title. Using the 'visibility' property instead
of using the 'display' property avoided a bug in some versions of Safari.
(The bug is pretty where esoteric: The browser ignored the 'hover' property
on 'li' objects inside an object whose display property was set to 'none'
when the page loaded...) Using the 'visibility' property instead of 'display'
would normaly take up extra room on the page, but that's avoided here by putting
the submenu on a second layer: see 'position: absolute' and 'z-index: 2'
in .submenu definition, higher up this page. */
.submenu a
{
display: block;
color: #eee;
background-color: #666633;
width: 146px; /* This should be width of .submenu above minus right-side padding on next line */
padding: 5px 0px 4px 20px;
text-decoration: none;
background-color: #666633;
border-bottom: #447755 dotted 1px;
border-top: 0; border-left: 0; border-right: 0;
}
ul { position: relative; display: block; }
li { position: relative; display: block; }
.submenubox {
margin: 0; padding: 0; border: 0;
}
.submenubox ul
{
margin: 0; padding: 0; border: 0;
list-style-type: none;
}
.submenubox ul li {
margin: 0; padding: 0; border: 0;
}
.submenubox ul li a:link { }
.submenubox ul li a:visited { }
.submenubox ul li a:hover
{
color: #c6e8e2; /* text color for submenu items */
background-color: #447755;
border-bottom: #447755 dotted 1px;
}
</style>
<script type="text/javascript">
// JavaScript functions to show and hide drop-down menus.
// In SimpleNavBar.html we call ShowMenuDiv each time the mouse goes over
// either the menu title or the submenu itself, and call HideMenuDiv when the
// mouse goes out of the menu title or the submenu iteslf (onMouseOut).
function ShowItem (itemID) {
var x = document.getElementById(itemID);
if (x)
x.style.visibility = "visible";
return true;
}
function HideItem (itemID) {
var x = document.getElementById(itemID);
if (x)
x.style.visibility = "hidden";
return true;
}
// As noted in the SimpleNavBarStyles.css file, using x.style.visibility as
// seen below seemed to have better cross browser support than using
// x.style.display="block" and x.style.display="none" to show and hide
// the menu.
</script>
<div class="mynavbar">
<a onmouseover="ShowItem('products_submenu');" onmouseout="HideItem('products_submenu');" href="placeholder.html" id="t1" class="navbartitle">Products</a><a onmouseover="ShowItem('services_submenu');" onmouseout="HideItem('services_submenu');" href="placeholder.html" id="t2" class="navbartitle">Services</a><a onmouseover="ShowItem('funstuff_submenu');" onmouseout="HideItem('funstuff_submenu');" href="placeholder.html" id="t3" class="navbartitle">Fun Stuff</a><a onmouseover="ShowItem('aboutus_submenu');" onmouseout="HideItem('aboutus_submenu');" href="placeholder.html" id="t4" class="navbartitle">About Us</a><a onmouseover="ShowItem('contact_submenu', 't5');" onmouseout="HideItem('contact_submenu');" href="placeholder.html" id="t5" class="navbartitle">Contacts & Directions</a>
<!-- REPLACE each "placeholder.html" URL below with the specific page you want
the user to go to when the given submenu item is clicked. -->
<!-- Products sub-menu, shown as needed -->
<div onmouseout="HideItem('products_submenu');" onmouseover="ShowItem('products_submenu');" id="products_submenu" class="submenu" style="visibility: hidden;">
<div class="submenubox">
<ul>
<li><a class="submenlink" href="placeholder.html">Flying Cars</a></li>
<li><a class="submenlink" href="placeholder.html">Super Squirters</a></li>
<li><a class="submenlink" href="placeholder.html">Sling Shots</a></li>
<li><a class="submenlink" href="placeholder.html">Bamboozlers</a></li>
<li><a class="submenlink" href="placeholder.html">Kazoos</a></li>
</ul>
</div>
</div>
<!-- Services sub-menu, shown as needed -->
<div onmouseout="HideItem('services_submenu');" onmouseover="ShowItem('services_submenu');" id="services_submenu" class="submenu">
<div class="submenubox">
<ul>
<li><a class="submenlink" href="placeholder.html">Toy Design</a></li>
<li><a class="submenlink" href="placeholder.html">Market Research</a></li>
<li><a class="submenlink" href="placeholder.html">IP Consulting</a></li>
<li><a class="submenlink" href="placeholder.html">Licensing</a></li>
</ul></div>
</div>
<!-- Fun Stuff sub-menu, shown as needed -->
<div onmouseout="HideItem('funstuff_submenu');" onmouseover="ShowItem('funstuff_submenu');" id="funstuff_submenu" class="submenu" style="visibility: hidden;">
<div class="submenubox">
<ul>
<li><a class="submenlink" href="placeholder.html">Toys We Designed</a></li>
<li><a class="submenlink" href="placeholder.html">Press Ravings</a></li>
<li><a class="submenlink" href="placeholder.html">Our Blog</a></li>
</ul>
</div>
</div>
<!-- About Us sub-menu, shown as needed -->
<div onmouseout="HideItem('aboutus_submenu');" onmouseover="ShowItem('aboutus_submenu');" id="aboutus_submenu" class="submenu" style="visibility: hidden;">
<div class="submenubox">
<ul>
<li><a class="submenlink" href="placeholder.html">Team</a></li>
<li><a class="submenlink" href="placeholder.html">Investors</a></li>
<li><a class="submenlink" href="placeholder.html">Partners</a></li>
<li><a class="submenlink" href="placeholder.html">Careers</a></li>
<li><a class="submenlink" href="placeholder.html">Our Blog</a></li>
</ul>
</div>
</div>
<!-- CONTACTS & DIRECTIONS sub-menu, shown as needed -->
<div onmouseout="HideItem('contact_submenu');" onmouseover="ShowItem('contact_submenu');" id="contact_submenu" class="submenu" style="visibility: hidden;">
<div class="submenubox">
<ul>
<li><a class="submenlink" href="placeholder.html">Contact</a></li>
<li><a class="submenlink" href="placeholder.html">Getting Here</a></li>
</ul>
</div>
</div><!-- end of sub-meus -->
</div>
<div><select style="margin-left: 200px; position: relative; z-index: 0;">
<option value=""></option>
<option value="28">Test</option>
<option value="Eff2">Test</option>
<option value="Effort1">Test</option>
<option value="FC">Test</option>
<option value="Effort1">Test</option><option value="Effort1">Test</option><option value="Effort1">Test</option><option value="Effort1">Test</option>
</select>
</div>
回答by Zeta
The <select>element is an interactive contentelement in HTML5 and a menuin HTML4.01. As such it is an object which requires user input and behaves like a right click context menu and is rendered above all document elements if active. Try it for yourself - open your contextmenu and hover over the navigation.
该<select>元素在 HTML5 中是一个交互式内容元素，在 HTML4.01 中是一个菜单。因此，它是一个需要用户输入的对象，其行为类似于右键单击上下文菜单，如果处于活动状态，则呈现在所有文档元素之上。亲自尝试 - 打开上下文菜单并将鼠标悬停在导航上。
This bugis connected to the behavior of other interactive content elements such as video(see also HTML5 rendering).
此错误与其他交互式内容元素的行为有关，例如video（另请参阅HTML5 渲染）。
The only way to prevent such behavior is to change the display property of an active select to nonewhile hovering an interactive element. visibility:hidden;won't help since the options are still shown, and using display:none;on options will results in rendering errors.
防止这种行为的唯一方法是none在悬停交互式元素时将活动选择的显示属性更改为。visibility:hidden;不会有帮助，因为选项仍然显示，使用display:none;on 选项会导致渲染错误。
Here is a small demonstrationof the technique described above:
.mynavbar:hover ~ * .selecthack > select:focus
.mynavbar:hover ~ .selecthack > select:focus{
display:none;
}
回答by user3927337
its very simple
它非常简单
$('IdOfMenu').on('mouseenter', function() {
$("IdOfDropDown").blur();
});
回答by thepriebe
Set your z-index to -1 for it to appear on the bottom. So on your select element you have an inline style defining the z-index to 1. Change it to negative 1.
将 z-index 设置为 -1 以使其显示在底部。因此，在您的 select 元素上，您有一个将 z-index 定义为 1 的内联样式。将其更改为负 1。
<select style="margin-left: 200px; position: relative; z-index: -1;">
I tried this in IE8 and it worked. The select drop-down was behind the menu options.
我在 IE8 中尝试过这个，它奏效了。选择下拉菜单位于菜单选项后面。
回答by user4391566
for those who have the same problem it is very easy, add the code below under your code's Menu, this worked for all the navigators.
对于那些有同样问题的人来说，这很容易，在代码的菜单下添加下面的代码，这对所有导航器都有效。
<input id="HideMenusTxt" name="HideMenusTxt" type="text" value="0" style="width:0;height:0;position:absolute;z-index:-1"/>
<script type="text/javascript">
//menuId= The Id of the div menu
$('#menuId').on('mouseenter', function() {
//in case we have opened select dropdown options, on mouseenter of the menu we set focus to "HideMenusTxt".
$('#HideMenusTxt').focus();
});
回答by Danilo Mena
Other solution, check if there is a select in the form and focus to the first element in the form instead of creating a hidden field.
其他解决方案，检查表单中是否有选择并聚焦到表单中的第一个元素，而不是创建隐藏字段。
$('#menuId').mouseover(function () {
//in case we have opened select dropdown options, on mouseover of the menu we set focus to the first element in the form.
var firstSelectElement = $('form:first select:first');
if (firstSelectElement.length > 0) {
$('form:first *:input[type!=hidden]:first').focus();
}
});
回答by BurninLeo
Using display: nonecauses the dropdown to lose it's focus, if it has - at least in Chrome, not so in Firefox. This can cause trouble, if some content shall be displayed instead of the <select>when the dropdown is used (replace options by some custom HTML).
使用display: none会导致下拉菜单失去焦点，如果它有的话——至少在 Chrome 中，在 Firefox 中不是这样。如果<select>使用下拉菜单时应显示某些内容而不是显示某些内容（用某些自定义 HTML 替换选项），则这可能会导致问题。
Using position: relative; z-index: -1may also cause trouble: As it makes the <select>disappear behind the default layer, it may become impossible to click the dropdown. Further, the "focus" event may be fired after the options have been rendered, so changing the z-index via JavaScript may not work as intended.
使用position: relative; z-index: -1也可能会出现问题：由于它使<select>默认图层后面的消失，因此可能无法单击下拉列表。此外，“focus”事件可能会在选项呈现后触发，因此通过 JavaScript 更改 z-index 可能无法按预期工作。
I came up with the solution to shift the dropdown out of view on "focus" and shift it back on "blur":
我想出了将下拉菜单移出“焦点”视图并将其移回“模糊”的解决方案：
position: relative; left: -9999px;
Compared to display: none, this solution also keeps the layout intact (except that the dropdown disappears), as the dropdown may define the height of its parent block element.
与 相比display: none，此解决方案还保持布局完整（除了下拉菜单消失），因为下拉菜单可能定义其父块元素的高度。
回答by Teodor Sandu
As Zeta said, the select box is an interactive element, you can't display anything above it using HTML/CSS, so the only option is to hide it when showing your menu, or simply to blurany focused selects on the page.
正如 Zeta 所说，选择框是一个交互式元素，您无法使用 HTML/CSS 在其上方显示任何内容，因此唯一的选择是在显示菜单时隐藏它，或者只是在页面上的blur任何focused 选择中隐藏它。
If you don't want to add any additional css classes though, you could simply blur()either at the start of your ShowItemfunction:
如果您不想添加任何额外的 css 类，您可以简单地blur()在ShowItem函数的开头：
...
function ShowItem (itemID) {
//jQuery version
$('select:focus').blur();
//OR non-jQuery:
document.activeElement.blur();
//note this will blur any focused element, so you might want to check
//if document.activeElement.tagName == 'SELECT' first, or other conditions
var x = document.getElementById(itemID);
...
...or more generically (for other readers not in your specific situation) in a hoveror mouseenterevent callback on the menu items that trigger the submenus appearance.
...或更一般地（对于不在您特定情况下的其他读者）在触发子菜单外观的菜单项上的hover或mouseenter事件回调中。
