Z- 인덱스를 사용하여 div의 스택 순서를 올바르게 제어하는 ​​방법은 무엇입니까?

Question

내 웹 사이트의 "#headerNav"가 표시 될 때 나타나는 드롭 다운 메뉴 (#dropDownMenu)가 있습니다. #dropDownMenu (원래 표시 장치로 숨김 : 링크가 넘어갈 때까지 아무 것도 표시되지 않음)를 #headerNav div 위에 약간 배치하면 올바르게 작동합니다.

이렇게하면 커서가 나타나면 드롭 다운 메뉴까지 커서를 충분히 빠르게 이동하지 않으면 서 발생하는 약간의 깜박임이 중지됩니다. #headerNav 위에 #dropDownMenu를 약간 겹치면 커서가 실제로 #dropDownMenu에있을 때 #headerNav가 여전히 마우스 오버되는 것처럼 보입니다.

어쨌든 머리글이나 #headerContent 뒤에 #dropDownMenu의 겹치는 부분을 숨기고 싶습니다. 따라서 모든 것이 더 멋지게 보이고 드롭 다운 메뉴가 실제로 #headerNav 아래에 나타나는 것처럼 보입니다.

다른 Z- 색인 설정을 시도했지만 아무 것도 작동하지 않는 것 같습니다. #headerNav : zoverdown #dropDownMenu의 z-index를 -1로 설정하면 예상대로 모든 콘텐츠 뒤에 숨겨집니다.

헤더 또는 #headerContent의 z- 인덱스를 "#headerNav : hover #dropDownMenu"보다 높은 수로 설정 한 다음 #headerNav 위로 마우스를 가져가도 차이가 없습니다. 여전히 #dropDownMenu가 겹쳐져있는 것을 볼 수 있습니다.

CSS :

header { 

    position:fixed; 
    top:0; 
    right:0; 
    left:0; 
    height: 40px; 
    z-index:20; 
    } 

    #headerContent { 
    background-color: $main-background-color; 
    width: $site-width; 
    margin:0px auto 0px auto; 
    height:40px; 

    } 

    #headerNav { 
    float:right; 
    height:37px; 
    width:auto; 
    margin-top:1px; 
    background-color:#464646; 
    color:#cccccc; 
    } 

    #headerNav:hover { 
    background-color:#626262; 
    cursor:pointer; 
    color: white; 
    } 

    #headerNav:hover #dropDownMenu { 
    position:absolute; 
    background-color:white; 
    border:1px solid gray; 
    top:35px; 
    right:-39px; 
    height:300px; 
    width:200px; 
    font-weight:bold; 
    color:gray; 
    display:block !important; 
    z-index:1; 
    } 

    ul li { 
    float:right; 
    } 

    #photoThumbnail img { 
    height:28px; 
    width:31px; 
    padding-top:5px; 
    padding-right:8px; 
    -moz-border-radius: 1px 12px 1px 12px; 
    border-radius: 1px 12px 1px 12px; 

    } 

    #currentUser { 
    position:relative; 
    padding-top:12px; 
    padding-left:12px; 
    padding-right:6px; 
    } 


    #siteNavigation { 
    display:none; 

    } 

HTML

<header> 
    <div id='headerContent'> 
    <div id='LogoHolder'> 
    </div> 
    <nav id='headerNav'> 
     <ul> 
     <li id='photoThumbnail'></li> 
     <li id='currentUser'> 
      <ul id='dropDownMenu'> 
      <li>link1</li> 
      <li>link2</li> 
      <li>link3</li> 
      <li>link4</li> 
      <li>link5</li> 
      <li>link6</li> 
      </ul> 
     </li> 
     </ul> 
    </nav> 
    </div> 
</header> 

예 및 수정이 크게 이해할 수있을 것이다.

종류는

Answer 1

Z- 색인 설정을 무시하는 경우 position 속성을 추가하거나 필요할 때 상대적으로 설정해야 할 수 있습니다. 위치 속성을 설정하지 않으면 z-index가 무시됩니다.

Answer 2

나는 당신이 기본적인 마크 업 문제를 해결 방법을 해킹하려고하는 것을 찾을 수 있습니다 생각 간주한다. UL 기반 드롭 다운을 할 수있는 일반적인 방법은 당신이 #headerNav 리튬에 가져가 작업을 설정이

<ul id='headerNav'> 
    <li>Menu Title 
     <ul class='dropDownMenu> 
      <li>link1</li> 
      <li>link2</li> 
     </ul> 
    </li> 
</ul> 

이 방법 : 마우스를 아래로 드롭은 호버 요소의 하위 메뉴가 열려있을 것입니다 (그리고 깜박이지 않음) 마우스를 .dropDownMenu 위로 가져 가면 마우스가 움직입니다. 당신은 가깝습니다 .. 조금 더 나은 HTML을 포장하고 li을 가리키고 CSS를 조정하여 "li ul.dropDownMenu"를 표시하고 숨길 필요가 있습니다

이것은 중첩의 필요성을 제거해야합니다 - 문제를 해결하십시오.