-2

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

我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 -->
4

1 回答 1

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>
于 2012-09-17T08:05:35.300 回答