4

我有两个选择框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自定义输入的插件。

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在同一级别上进行比较，这意味着具有不同父级的两个元素将根据其父级的 z-indexes 进行 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 回答