javascript - 使用 z-index 解决方法的 Z-index 绝对定位元素位于父级下方？

Question

我试图通过使用 CSS 伪元素在我的导航栏中的按钮后面创建一个阴影。我想将伪元素放在中间按钮后面，但在导航栏中其他两个按钮的前面。

我试过用 z-index 来做，但我意识到你不能用 z-index 把一个伪元素放在它的父元素后面，所以我在寻找解决方法。

This is the website I am referring to.

这是导航栏的 CSS

#navbar{
    z-index: 3;
    position:relative;
    box-shadow: 0px 4px 10px #000;
    }

#navbar li{
    display:inline-block;
    height:100px;
    line-height:100px;
    width:33.333333333333333%;
    color:black;
    text-align:center;
    font-size:22px;
    font-weight:bold;
    background-color:white;
    padding:0;
    }

#navbar li:nth-child(2):after{
    position:absolute;
    top:-42;
    left:78;
    z-index:1;
    content:"";
    height:150px;
    width:170px;


    -webkit-transform: perspective(200px) rotateX(57.5deg) scale(1.1,1.1);
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
    }

#navbar li:nth-child(2) a{
    position:relative;
    z-index:100;
    }

#navbar li a{
    color:black;
    display:inline-block;
    }

body.page-id-14 #sidebar, body.page-id-14 #content{
    box-shadow: none;
    height:770px;
    overflow:hidden;
    }



#menu-hovedmenu{
    margin:0;
    }

body.page-id-10 #navbar li:nth-child(1) > a, body.page-id-12 #navbar li:nth-child(2) > a, body.page-id-14 #navbar li:nth-child(3) > a, body.single-malerservice #navbar li:nth-child(1) a, body.single-industrilakering #navbar li:nth-child(2) a, body.single-gulvservice #navbar li:nth-child(3) a{
    color:white;
    }

#navbar li:hover{
    color:white;
}

#navbar li:nth-child(1), #navbar li:nth-child(2), #navbar li:nth-child(3){
    float:left;
    position:relative;
    cursor:pointer;
    text-align: center;
    border-top-left-radius: 5px;
}

#navbar li:nth-child(3){
    border-top-right-radius: 5px;
}

#navbar li:nth-child(1):hover, body.page-id-10 #navbar li:nth-child(1):after, body.page-id-10 .page-item-10, #navbar li:nth-child(1):hover:after, body.page-id-10 #sidebar, body.single-malerservice #sidebar, body.single-malerservice #navbar li:nth-child(1), body.single-malerservice #navbar li:nth-child(1):after{

    color: white;
    background-color: #234e7b;
    background-image: -webkit-linear-gradient(top, #234e7b, #0d2951);
    background-image:    -moz-linear-gradient(top, #234e7b, #0d2951);
    background-image:     -ms-linear-gradient(top, #234e7b, #0d2951);
    background-image:      -o-linear-gradient(top, #234e7b, #0d2951);
    background-image:         linear-gradient(top, #234e7b, #0d2951);
}

#navbar li:nth-child(1):after{
    content: "";
    position: absolute;
    background: none repeat scroll 0% 0% #00F;
    top: 0px;
    right: -51px;
    bottom: 0px;
    width: 100px;
    transform: skew(-40deg);
    z-index: 1;
    background-color: #FFF;
}



#navbar li:nth-child(2):hover, body.page-id-12 .page-item-12, #navbar li:nth-child(2):hover:after,  body.page-id-12 #sidebar, body.single-industrilakering #navbar li:nth-child(2), body.single-industrilakering #sidebar{
    color:white;
    background-color: #12910f;
    background-image: -webkit-linear-gradient(top, #12910f, #0b4b0e);
    background-image:    -moz-linear-gradient(top, #12910f, #0b4b0e);
    background-image:     -ms-linear-gradient(top, #12910f, #0b4b0e);
    background-image:      -o-linear-gradient(top, #12910f, #0b4b0e);
    background-image:         linear-gradient(top, #12910f, #0b4b0e);
}




#navbar li:nth-child(3):before{
    content: "";
    position: absolute;
    background: none repeat scroll 0% 0% #F00;
    top: 0px;
    left: -51px;
    bottom: 0px;
    width: 100px;
    transform: skew(40deg);
    z-index:10;

    background-color: #FFF;

}

body.page-id-14 #navbar .page-item-14, body.page-id-14 #navbar li:nth-child(3):before, #navbar li:nth-child(3):hover, #navbar li:nth-child(3):hover:before, body.single-gulvservice #navbar li:nth-child(3), body.single-gulvservice #navbar li:nth-child(3):before{
    background-image: -webkit-linear-gradient(top, #f83838, #c00000);
    background-image:    -moz-linear-gradient(top, #f83838, #c00000);
    background-image:     -ms-linear-gradient(top, #f83838, #c00000);
    background-image:      -o-linear-gradient(top, #f83838, #c00000);
    background-image:         linear-gradient(top, #f83838, #c00000);
}

#navbar li:hover > a{
    color:white;
    text-decoration: none;
}

Answer 1

尝试使用 box-shadow , border , 和 outline

片段

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>shadow</title>
  <style>
    .box {
      -webkit-box-shadow: -1px 2px 8px 8px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: -1px 2px 8px 8px rgba(0, 0, 0, 0.75);
      box-shadow: -1px 2px 8px 8px rgba(0, 0, 0, 0.75);
      border: 1px outset #888;
      outline: 3px inset #aaa;
      width: 300px;
      height: 300px;
      margin: 20px auto;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>