z-index 不适用于几个项目？答案

【问题标题】：z-index not working on several items?z-index 不适用于几个项目？
【发布时间】：2014-02-01 20:31:01
【问题描述】：

我有一个带有 3 个项目的 select 框，位于 input 文本框上方。当我打开 select 框时，我的 input 字段与第一个 select 框 option 项重叠。

我在select 框中设置了一个内联样式z-index:9999;。当我将z-index:-1 放在我的input 文本框上时，它会移动到容器div 后面并且不再可点击。如果我将z-index: -2 放在容器上，则不会发生任何事情。我该如何解决这个问题？

代码摘录：

<div id="search-2" class="search-widget-wrapper widget_search">
    <div id="searchwrapper">
      <form method="get" id="searchform" action="#">
          <input type="text" class="searchbox" name="s" id="s" placeholder="search here &hellip;" />
          <input type="image" class="searchbox_submit" value="" />
      </form>
</div></div>

#searchwrapper {
    background-image: url("/wp-content/themes/responsive-icsl/images/search_box.png");
    background-repeat: no-repeat;
    height: 28px;
    margin: 11px 0 10px;
    padding: 0;
    position: relative;
    width: 288px;
}

容器

<li class='lang'>
   <select id="lang-chooser" name="language-chooser" style="max-width:80px;" onChange = "document.location.href =this.value">
    <option value='localhost/?s=sidebar&amp;x=0&amp;y=0' selected='selected' title='./wp-content/plugins/qtranslate/flags/gb.png'> ENG </option>
    <option value='localhost/?s=sidebar&amp;x=0&amp;y=0&amp;lang=de' title='./wp-content/plugins/qtranslate/flags/de.png'> DEU </option>
    <option value='localhost/?s=sidebar&amp;x=0&amp;y=0&amp;lang=ru' title='./wp-content/plugins/qtranslate/flags/ru.png'> RUS </option>
   </select>
</li>

更新

我添加了一个屏幕截图来显示问题：

截图：http://666kb.com/i/c7bv3x65hgkwj0gzs.jpg

实际上，我使用 msdropdown 来渲染我的下拉框，这将自动在下拉列表中生成 z-index:9999。

我的结构是这样的：

  <div id="header">
    <?php if ( get_header_image() ) : ?>
        <div id="logo">
        </div><!-- end of #logo -->  
    <div id="headermenuwrapper">            
   </div><!-- end of #headermenuwrapper -->
   <div id="headerwidgetswrapper">
       <div id="headernewswrapper">
       <div class="headernewstitle">NEWS</div>
       <div class="headernewsnav"></div>
       </div><!-- end of #headernewswrapper -->
       <div id="headersearchwrapper">
       </div><!-- end of #headersearchwrapper -->
    </div><!-- end of #headerwidgetswrapper -->
</div><!-- end of #header -->

【问题讨论】：

它似乎在您的本地主机上。你不上网看看到底发生了什么吗？
z-index 是从父元素继承而来的，因此您必须将它放在您希望“放在最前面”的元素上，而不是放在它的父元素上。
请使用JSFiddle 之类的东西来重现您的问题，然后在您的问题中链接到它。您提供的代码并不足以帮助我们看到问题，而且实际上似乎无关紧要，因为那里甚至没有任何 z-index 值。我们可以做一些有根据的猜测，但我们宁愿给你一些可靠的东西
您是指带有“下拉菜单”的select#lang-choose 吗？我在您的代码中没有看到任何 z-index。

标签： jquery html css web z-index

【解决方案1】：

你必须为你的 z-index 设置一个归零

就像你想在内容后面一个输入，一个在内容前面

<div class="content" style="z-index:0;>
  <input type="text" style="z-index:-1;/>
  <input type="text" style="z-index:1;/>
</div>

【讨论】：