Question

我使用Jquery创建了一个下拉列表，有些原因我可以在列表中看到其他表单元素。它几乎就像是在背景和文本/表单元素之间。这是一张参考照片：

enter image description here

我尝试过更改z-index，但什么都没发生。如果我把它定位：绝对或固定，它将解决透明度问题，但是如果窗口大小改变，那么下拉列表的位置也会改变......

这是html代码：

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<label class="introl" for="location">Location </label><input id="locality" class="intro" type="text" name="location" size="40" value="Country, City" /> <br /> <br />
<label class="introl" for="gender">Gender</label><div class="gender"><span class="male"><input type="radio" name="gender" value="M" />male</span><input type="radio" name="gender" value="F" /> female</div> <br />
<label class="birthday" for="birthday">Date of Birth</label>
<? echo dateOfBirth("","","");?><br />
<input class="submit_intro" type="submit" name="submit_intro" value="Submit" />
 </form>
          <table>
                <tr>
                   <td>
                      <div class="dropdown1"></div>
                   </td>
                </tr>
          </table>

（列表显示在div＃dropdown1中）

这是dropdown1的css

.dropdown1{
margin-top: -253px;
margin-left:183px;
font-family: "Arial Narrow", Arial, Gadget, sans-serif;
width: 372px;
background:#FFF;}

我需要列表的背景来覆盖其他表单元素（单选按钮，列表等），以及防止在窗口大小发生变化时更改位置。谢谢！

编辑：这是其他人的css：

label.introl
 {
width: 6em;
float: left;
text-align: right;
display: block;
font-family: "Arial Narrow", Arial, Gadget, sans-serif;
font-stretch: condensed;
font-size: 24px;
color: #8a8a8a;
margin-left: 25px;
 }

.birthday
 {
width: 6em;
float: left;
text-align: right;
display: block;
font-family: "Arial Narrow", Arial, Gadget, sans-serif;
font-stretch: condensed;
font-size: 24px;
color: #8a8a8a;
margin-left: 25px;
margin-top: 3px;
      }

 .list1{
margin:0px;
padding:0px;
width : 373px;
list-style-type: none;
border: 1px solid #e2e3ea;
border-top: 0px;
margin: 0;
margin-top: -11px;
      }

 .list1 li{
list-style : none;
width : 373px;
border-right: 1px solid #e2e3ea;
text-align:left;
font-size:24px;
     }

 .list1 a{
display : block;
color:black;
text-decoration : none;
padding : 5px;
padding-left: 1px;
cursor : pointer;
      }

   .selected1{
background: #F6F6F6;
border : none;
color: white;
      }

  .selected1 a{
color : black;
      }

   #loading1{
visibility:hidden;
padding-left:5px;
     }

  .ajax_response1{
position:absolute;
top:auto;
     }

  .matched1{
font-weight:bold;
color: #000000;
background : #D8D8D8;
     }

   .ajax_response1{
border-color : #CCCCCC;
border-style:solid;
border-width : 0px 1px 0px 1px;
background : #E0E0E0;
display:none;
/*padding:2px 2px;*/
position : absolute;
overflow: hidden;
z-index:9999;
       }

  .highlighted1{
font-weight : bold;
       }

Answer 1

我认为您正在使用jquery UI。这附带了jQueryUI CSS，可以从here

进行自定义和下载

Answer 2

好的，因为你使用的边距改变你的css：

.dropdown1 {
    background: none repeat scroll 0 0 #FFFFFF;
    font-family: "Arial Narrow",Arial,Gadget,sans-serif;
    left: 183px;
    position: relative;
    top: -245px;
    width: 372px;
    z-index: 99999;
}

即。使用相对定位而不是边距，它会起作用，无论如何都会在Firefox上运行......

Answer 3

我有同样的问题。这对我有用：

position: relative;
z-index: 1;

为什么我的下拉列表是透明的？

3 个答案: