z-index和pseudoblass

Question

後我正在導航到我的網站，我無法修復層的問題。我想隱藏另一個元素下的元素，我將z-index設置爲父項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

你需要給父母一個position:屬性不是static，所以你很可能會使用relative。

另外，我還元素之後，因此框下就不再顯示，當你將鼠標懸停在菜單元素添加到position: relative;和li和top:0;向left:0;的。選中此codepen：

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

編輯：您可以定位的孩子父母下，只要家長有position: relative或靜態以外的任何其他position:。我原來的回答說，你不能將孩子置於父母之下，這是不正確的，你實際上可以，我的壞...

Answer 2

z-index僅適用於有一個stacking context與position元素集合到fixed，absolute或relative。