重叠的两个选择框 [英] overlapping of two select boxes

问题描述

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

I have two select boxes in HTML, one below the other.

• 第一个选择框是正常的


• 第二个选择框默认情况下是打开的（意味着选项无需点击就会显示）

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

Now when I click on the first select box it's content moves behind the other 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>

自定义选择是一个 jquery 输入。

Custom select is a jquery plugin for custom inputs.

CSS 第一个选择框

CSS first 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;

推荐答案

code>在同一水平上进行比较，这意味着具有不同父节点的两个元素将与其父节点的z索引相关联地进行z索引，这里是一个示例 http://jsfiddle.net/pavloschris/5tLrz/ 。当我遇到这种问题，通常是因为这一点。

z-indexes are compared on the same level, this means that two elements with different parents will be z-indexed in relation with their parent's z-indexes, here's an example http://jsfiddle.net/pavloschris/5tLrz/. When I encounter this kind of problems it usually is because of that.

这篇关于重叠的两个选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！