z-index 및 pseudoclass 이후

Question

내 웹 사이트에 navbar를 만들고 있는데 레이어 문제를 해결할 수 없습니다. 나는 다른 하나의 요소를 숨기고 싶습니다. 저는 z- 인덱스를 부모 999와 자식 -999로 설정했지만 자식은 여전히 ​​부모를 넘습니다. 그리고 또 다른 문제는 내가 listmenu를 켜면 : 부모가 자식 아래로 간다. 나는 그것을 고치는 방법을 모른다. 는 여기가 어떻게 보이는지 codepen하는 링크입니다 : http://codepen.io/worekgowna/pen/eWYwOr

여기 사람이 가고 싶어하지 않을 경우 그 코드의에 codepen :

<ol> 
    <li><a href="#"></a> 
     <ul> 
     <p>reagents</p> 
     <li><a href="#">all reagents</a></li> 
     <li><a href="#">photochemistry</a></li> 
     </ul> 
    </li> 

    <li><a href="#"></a> 
     <ul> 
     <p>studio super b</p> 
     <li><a href="#">cinematography</a></li> 
     <li><a href="#">archive</a></li> 
     <li><a href="#">price list</a></li> 
     </ul> 
    </li> 

    <li><a href="#"></a></li> 

    <li><a href="#"></a> 
     <ul> 
     <p>reagents</p> 
     <li><a href="#">all reagents</a></li> 
     <li><a href="#">photochemistry</a></li> 
     </ul> 
    </li> 
    <li><a href="#"></a> 
     <ul> 
     <p>reagents</p> 
     <li><a href="#">all reagents</a></li> 
     <li><a href="#">photochemistry</a></li> 
     </ul> 
    </li> 
    </ol> 

/* ------------------------CZĘŚĆ-GÓRNA-MENU------------------------ */ 
body{ 
    color: white; 
    font-family: Arial; 
} 
     /* wygląd głównego elementu - ol */ 
     ol { 
     list-style-type:none; 
     padding:0; 
     margin:0; 
     font-size:18px; 
     height:2em; 
     line-height:2em; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     z-index: 999; 
     } 

     /* wygląd wszystkich elementów - a - znajdujących się w elemencie - ol */ 
     ol a { 
     display:block; 
     text-decoration:none; 
     color:white; 
     z-index: 999; 
     } 

     /* wygląd elementów - li - wszystkich dzieci elementu - ol */ 
     ol > li { 
     float:left; 
     width:25px; 
     height:25px; 
     border-radius: 50%; 
     border: 3px solid black; 
     background-color:black; 
     margin-left: 50px; 
     z-index: 999; 
     } 

     ol > li:after{ 
      content:""; 
      border-bottom: 2px solid black; 
      width: 50px; 
      position: absolute; 
      margin: 12px 0 0 28px; 
      z-index: -999; 
     } 

     ol > li:last-child:after{ 
     border-bottom: 0px; 
     } 

     /* wygląd elementu - li - pierwszego dziecka elementu - ol */ 
     ol > li:first-child { 
     margin-left:0; 
     } 

     /* wygląd elementów - li - wszystkich dzieci elementu - ol - po najechaniu kursorem myszki na element - li */ 
     ol > li:hover { 
     background-color: #f7bc0e; 
     z-index: 999; 
     } 

     /* wygląd elementu - a - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */ 
     ol > li:hover > a { 
     } 

     /* wygląd elementu - ul - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */ 
     ol > li:hover > ul { 
     display:block; 
     } 

     /* ------------------------CZĘŚĆ-ROZWIJANA-MENU------------------------ */ 

     /* wygląd głównych rozwijanych elementów - ul */ 
     ol > li > ul { 
     display:none; 
     list-style-type:none; 
     padding:0px; 
     margin-top: 13px; 
     margin-left: -80px; 
     z-index: -999; 
     width: 180px; 
     position: relative; 
     } 

     ol > li > ul > p{ 
     background-color: rgba(0, 0, 0, 0.8); 
     z-index: -999; 
     position: relative; 
     border-bottom: 2px solid white; 
     text-transform: uppercase; 
     margin-top: 10px; 
     padding-top: 20px; 
     text-align: center; 
     -webkit-margin-before: 0; 
     -webkit-margin-after:0; 
     -webkit-margin-start: 0px; 
     -webkit-margin-end: 0px; 
     } 

     /* wygląd elementu - li - w części rozwijanej */ 
     ol > li > ul > li { 
     position:relative; 
     background-color: rgba(0, 0, 0, 0.8); 
     } 

     /* wygląd elementu - a - w części rozwijanej */ 
     ol > li > ul > li > a { 
     position: relative; 
     padding: 10px 40px; 
     text-transform: uppercase; 
     font-size: 12px; 
     } 

     ol > li > ul > li > a:before { 
     content:""; 
     position: absolute; 
     border: 3px solid #f7bc0e; 
     border-radius: 50%; 
     width: 15px; 
     height: 15px; 
     background:#f7bc0e; 
     left: 10px; 
     top: calc((100% - 20px)/2) 
     } 

     /* wygląd elementu - li - w części rozwijanej, po najechaniu kursorem myszki na dany element - li */ 
     ol > li > ul > li:hover { 
     } 

     /* wygląd elementu - a - w części rozwijanej, po najechaniu kursorem myszki na element - li */ 
     ol > li > ul > li:hover > a:before { 
     content:""; 
     border: 3px solid #f7bc0e; 
     border-radius: 50%; 
     width: 15px; 
     height: 15px; 
     background: black; 
     } 

Answer 1

부모에게 static이 아닌 position: 속성을 부여해야하므로 relative이 가장 많이 사용됩니다. 상자 아래에 더 이상 표시되지 않습니다 당신이 메뉴 요소에 마우스를 가져 가면 있도록

또한, 나는 요소 이후에 li 및 top:0; 및 left:0;에 position: relative;을 추가했습니다. 이 codepen을 확인하십시오

http://codepen.io/Varin/pen/bWGXXX

편집 : 부모가 position: relative 또는 정적 이외의 다른 position:을 가지고과 같이 한 부모에서 아이를 배치 할 수 있습니다. 내 원래의 대답은 당신이 사실이 아니라 부모의 아래에있는 아이를 위치시킬 수 없다고 말했다. 실제로는 내 나쁜 ...

Answer 2

z-index 만 stacking contextposition 세트가 요소에서 작동 fixed, absolute 또는 relative.