4

に 2 つの選択ボックスがありHTML、一方が他方の下にあります。

  • 最初のセレクトボックスはノーマル
  • 2 番目の選択ボックスはデフォルトで開かれています (クリックせずにオプションが表示されることを意味します)。

最初のコンテンツをクリックすると、select boxコンテンツが他のコンテンツの後ろに移動しselect boxます。

HTML

<form>
    <li>
        <label class="labelwid" for="partner">Select partner*</label>
            <select name="partner" id="partner" class="validate[required] text-input selectbox customselect" style="width:275px !important">
                <option value="{partnerno}">{partnername}</option>
            </select>
    </li>
    <li>
        <div class="fl"><b>Market Application</b><br />
            <select name="markappcategory[]" id="category" multiple="multiple" class="validate[required] text-input  selectbox" style="width:230px !important">
                {categoryname_html_m}
            </select>
        </div>
    </li>
</form>

Custom select は、jqueryカスタム入力用のプラグインです。

CSSfirst select box

position:absolute; top:40px; padding:2px 0 5px 0; left:0; overflow-x:hidden; overflow-y:auto; z-index:1000; background:#fff; border:1px solid #d1cdcd; border-top:none; font-size:15px; width:265px; left:4px; height:100px;
4

3 に答える 3

2

z-indexes同じレベルで比較されます。これは、異なる親を持つ 2 つの要素が、親の z-index に関連して z-index されることを意味します。例はhttp://jsfiddle.net/pavloschris/5tLrz/です。この種の問題に遭遇したとき、それは通常それが原因です。

于 2013-02-21T08:37:44.303 に答える
1

positionスタイルタグでを指定していません。CSSでやっていますか？もしそうなら、cssコードを投稿してください。詳細については、 http ：//www.w3schools.com/cssref/pr_class_position.aspを参照してください。

于 2013-02-21T07:13:02.203 に答える
1 
<form> 
    <li> 
        <label class="labelwid" for="partner" style="position: absolute; top: 10; left:10;" >Select partner*</label> 
        <select name="partner" id="partner" class="validate[required] text-input selectbox customselect" style="position: absolute; top: 10; left:200; width:275px !important"> 
            <option value="{partnerno}">{partnername}</option> 
        </select> 
    </li>   
    <li> 
        <div class="fl">
            <label style="position: absolute; top: 200; left:10;"><b>Market Application</b></label><br /> <select name="markappcategory[]" id="category" multiple="multiple" class="validate[required] text-input selectbox" style="position: absolute; top: 200; left:200; width:230px !important"> {categoryname_html_m} </select> 
        </div> 
    </li>

このコードのみを試してください。それは私にとってはうまくいきます。必要に応じて位置を変更します。

于 2013-02-21T07:24:09.737 に答える