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

Question

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

我试过更改 z-index，但没有任何反应。如果我将其设置为 position:absolute 或 fixed，它将解决透明度问题，但是如果窗口大小发生变化，则下拉列表的位置也会发生变化......

这是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 中)

这是下拉菜单 1 的 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

好的，这是因为您使用的边距将您的 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 上都可以......