私のドロップダウンリストのdivは透明ですか？

Question

私はJqueryを使ってドロップダウンリストを作成しましたが、何らかの理由で他のフォーム要素がリスト上に表示されることがあります。これは、背景とテキスト/フォーム要素の間にあるかのようです。ここでは、参照のための写真です：

Iは、zインデックスを変更しようとしましたが、何も起こりませんでした。私はそれが位置させる場合：絶対または固定、それは透明性の問題を解決します、しかし、ウィンドウのサイズが変更され、その後、ドロップダウンリストの位置も...

を変更する場合はここで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に表示されます）

そして、ここでは、私は他のフォームのelemをカバーするために、リストの背景を必要とするdropdown1

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

のCSSですウィンドウのサイズが変更された場合に変更される位置を妨げるだけでなく、ラジオボタンやリストなども変更できます。ありがとう！

EDIT：ここでは他の人のための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を変更する使用していた余白のbecuseたオクラホマからのカスタマイズやダウンロード可能ですjQueryUI 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; 
} 

すなわち、マージンの代わりに相対的な位置を使用して、それはうまくいくでしょう...

Answer 2

私はあなたのjqueryのUIを使用していると思います。これはhere