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

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

Answer 2

您需要为父级position:提供不属于static的属性，因此您很可能会使用relative。

此外，我已将position: relative;添加到li以及top:0;和left:0;添加到after元素，以便当您将鼠标悬停在菜单元素上时，它不再显示在框下方。检查这个codepen：

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

编辑：只要父级有position: relative或除静态之外的任何其他position:，您就可以将子级置于父级之下。我原来的答案说你不能把孩子置于父母之下，这不是真的，你实际上可以，我的坏......

之后的z-index和pseudoclass

2 个答案: