z-index 和伪类之后

Question

我正在为我的网站制作导航栏，但我无法解决图层问题。我想将元素隐藏在另一个元素下，我将 z-index 设置为父级 999 和子级 -999 但子级仍然在父级之上。我的另一个问题是，当我打开 listmenu 时：在父级位于子级之后。我不知道如何解决它。这是 link 来编写它的样子：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

z-index 仅适用于 stacking context 且 position 设置为 fixed、absolute 或 relative 的元素。

Answer 2

您需要给 parent 一个 position: 属性而不是 static，因此您很可能会使用 relative.

此外，我已将 position: relative; 添加到 li 并将 top:0; 和 left:0; 添加到 after 元素，因此当您将鼠标悬停在菜单元素。检查此代码笔：

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

编辑：只要 parent 有 position: relative 或除静态以外的任何其他 position:，您就可以将 child 置于 parent 之下。我原来的回答说你不能把 child 放在 parent 下，这是不正确的，你实际上可以，我的错......

z-index 和伪类之后

z-index and pseudoclass after

html

css

navbar