Question

I have a select box with 3 items that is positioned over an input textbox. When I open the select box, my input field overlaps the first select box option item.

I have set an inline style, z-index:9999; on the select box.
When I put z-index:-1 on my input textbox, it moves behind the container div and is no longer clickable. If I put z-index: -2 on the container, nothing happens. How do I resolve this issue?

Code Excerpt:

<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;
}

The container

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

Update

i added a screenshot to show the problem:

screenshot: http://666kb.com/i/c7bv3x65hgkwj0gzs.jpg

actually, i use msdropdown, to render my dropdownbox, this will automatically make z-index:9999 on the dropdown.

my build up is this:

  <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

You have to set a ground zero for your z-index

So like if you want one input behind and one infront of content

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