-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 のグラウンド ゼロを設定する必要があります

コンテンツの後ろに 1 つの入力とコンテンツの前に 1 つの入力が必要な場合のように

<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 に答える