html - 两个选择框重叠

Question

我在 HTML 中有两个选择框，一个在另一个下方。

• 第一个选择框正常
• 第二个选择框默认打开(意味着选项显示不点击)

现在当我点击第一个选择框时，它的内容移动到另一个选择框的后面。

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 插件。

CSS 第一个选择框

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;

Answer 1

z-indexes 在同一级别上进行比较，这意味着具有不同父级的两个元素将根据其父级的 z-index 进行 z-indexed，这里是一个示例 http://jsfiddle.net/pavloschris/5tLrz/ .当我遇到这种问题时，通常是因为这个。