내 드롭 다운 목록 div가 투명하게 표시되는 이유는 무엇입니까?

Jquery를 사용하여 드롭 다운 목록을 만들었습니다. 그리고 다른 양식 요소를 목록에서 볼 수있는 이유가 있습니다. 마치 배경과 텍스트/양식 요소 사이에있는 것처럼 보입니다. 다음은 참조를 위해 사진입니다 : 내가 Z- 인덱스를 변경하려했지만, 아무 일도내 드롭 다운 목록 div가 투명하게 표시되는 이유는 무엇입니까?

enter image description here

. 내가 그것을 위치 할 경우

<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>

: 절대 또는 고정, 그것은 창 크기 변경, 또한이 변경 드롭 다운 목록의 다음 위치 ...

가 여기에 HTML 코드이다 그러나 경우, 투명성 문제를 해결합니다

을 (목록은 DIV 번호의 dropdown1에 나타납니다) 그리고 여기

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

내가 다른 형태의 ELEM 다루 목록의 배경을 필요로하는 dropdown1에 대한 CSS의 ents (라디오 버튼,리스트 등)뿐만 아니라 윈도우의 크기가 바뀌면 바꿀 위치를 막을 수 있습니다. 감사!

편집 :

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는 어떤 모양입니까? –

이 동작과 함께 jsFiddle 예제를 게시하십시오. – j08691

양식 자체에 적용된 스타일이 없다고 생각합니다. @SkonJeet, 나는 Z- 색인으로 땜질을 시도했지만 아무것도 작동하지 않는 것 같습니다! – MerrickC

는 여백의 당신이 당신의 CSS를 변경 becuse를 사용하고 있었다 확인 :

.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; 
}

즉, 상대적인 위치를 대신 여백을 사용하고 그것이 작동합니다, 어쨌든 파이어 폭스에 않습니다 ...

출처

2012-03-19 17:43:35 Liam

이 플러그인을 사용하면 더 가까워졌습니다. 감사! 편집 : "left"및 "top"속성에 중요하며 작동했습니다! – MerrickC

난 당신이 JQuery와 UI를 사용하여 생각 : 여기에있는 사람들을위한 CSS가 있습니다. 이것은 사용자 정의 및 다운로드 할 수 jQueryUI CSS와 함께 제공에서 here

출처

2012-03-19 16:45:46 prasann

내 드롭 다운 목록 div가 투명하게 표시되는 이유는 무엇입니까?

답변

관련 문제