Question

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

我在z-index:9999;框上设置了内嵌样式select。当我将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 -->

Answer 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>

z-index没有处理几个项目？

更新

1 个答案: