그레이 아웃 CSS 수퍼 피쉬 메뉴

Question

웹 페이지에서 특정 버튼을 클릭하면 사용자가 '예'또는 '아니요'를 클릭 할 때까지 전체 페이지가 회색으로 표시되는 스크립트를 작성했습니다. 이것은 충분히 단순 해 보였지만, 나는 Superfish에서 사용하고있는 메뉴와 충돌합니다. 나머지 페이지가 회색으로 표시되면 메뉴에 계속 액세스 할 수 있습니다.

은 내가 superfish CSS의 스크립트 그래서 내가 왜 내 회색 덮개 파악 중 하나를해야한다는 생각

Position: relative 

또는

Position: absolute 

시리즈를 사용한다는 사실에 내려 troubleshot 상자가 작동하지 않거나 소스에 내 탐색 표시기의 하드 코드 위치가 없습니다. 내 관심사는 내가 그렇게한다면 셋업은 나의 결의안에만 적용될 것인가?

내 회색 박스 코딩에서 놓친 뭔가가 있나요?

#cover { 
      display:none; 
      position:absolute; 
      left:0px; 
      top:0px; 
      width:100%; 
      height:100%; 
      background:gray; 
      filter:alpha(Opacity=50); 
      opacity:0.5; 
      -moz-opacity:0.5; 
      -khtml-opacity:0.5 
} 

저는 CSS에 많은 경험이 없습니다. 나는 어제 해결책을 찾기 위해 몇 시간을 보았지만, 내가 겪고있는 문제와 관련된 것을 찾을 수 없었다.

감사합니다.

Answer 1

아래의 설정을 사용하는 중에 문제가 발생했습니다.

#cover { 
     display:none; 
     position:absolute; 
     left:0px; 
     top:0px; 
     width:100%; 
     height:100%; 
     background:gray; 
     filter:alpha(Opacity=50); 
     opacity:0.5; 
     -moz-opacity:0.5; 
     -khtml-opacity:0.5 
     z-index:100 
} 

위치가 선언 된 직후 z- 인덱스를 설정해야한다는 것을 알았습니다. 그렇지 않으면 전혀 작동하지 않습니다.

#cover { 
     display:none; 
     position:absolute; 
     z-index:100 
     left:0px; 
     top:0px; 
     width:100%; 
     height:100%; 
     background:gray; 
     filter:alpha(Opacity=50); 
     opacity:0.5; 
     -moz-opacity:0.5; 
     -khtml-opacity:0.5 
} 

Answer 2

메뉴 블록 z-index을 낮추고 오버레이 블록 z-index을 설정해야합니다.

.someClass 
{ 
    position: relative; 
    z-index: 2; 
}