Z 索引绝对定位元素低于父级，具有 z 索引解决方法

Z-index absolute positioned element below parent with z-index workaround?

本文关键字：索引 具有 解决 方法 于父级 定位 元素      更新时间：2023-09-26

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

我尝试过用z-index这样做，但我意识到你不能使用 z-index 将伪元素放在其父元素后面，因此我正在寻找解决方法。

这就是我所指的网站。

这是导航栏的 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;
}

尝试使用 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>

相关文章：