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

我用Jquery创建了一个下拉列表，还有一些原因，我可以看到列表中的其他表单元素。这几乎就好像它在背景和文本/表单元素之间。下面是引用照片：为什么我的下拉列表div透明？

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

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

我需要的列表的背景掩护其他形式ELEM的CSS ents（单选按钮，列表等）以及防止窗口大小改变时它的位置改变。谢谢！

编辑：下面是别人的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; 
     }

来源

2012-03-19 MerrickC

它不透明，它坐在窗体元素后面。表单的CSS是什么样的？ – 2012-03-19 16:35:12

请发布一个jsFiddle这个行为的例子。 – j08691 2012-03-19 16:39:58

我不认为我有任何样式适用于窗体本身。 @SkonJeet，我试着用z-index修饰，没有任何东西可以工作！ – MerrickC 2012-03-19 16:40:40

好它becuse边缘的你使用你的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上无论如何...

来源

2012-03-19 17:43:35 Liam

这让我更接近哈哈。谢谢！编辑：我还添加了！对“左”和“顶”属性很重要，它的工作！ – MerrickC 2012-03-19 18:12:55

我认为你是使用jQuery UI。这种带有jQueryUI的CSS这是定制和下载从here

来源

2012-03-19 16:45:46 prasann

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

回答

相关问题