Question

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

第一个选择框正常
默认情况下，第二个选择框已打开（表示选项无需点击即可显示）

现在当我点击第一个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>

自定义选择是自定义输入的jquery插件。

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;

Answer 1

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

Answer 2

您没有在样式标记中指定position。你在CSS中做到了吗？如果是这样，发布css代码。有关详情，请参阅：http://www.w3schools.com/cssref/pr_class_position.asp。

Answer 3

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

仅尝试此代码。这对我来说可以。根据你的需要改变你的位置。

两个选择框的重叠

3 个答案: