z-index with after pseudo

Question

我正在构建一个包含汉堡菜单按钮的导航栏。我已经创建了一个用于容纳按钮的容器，但是我想让它的容器看起来像一个伪后类，我已经完成了。

然而，伪类出现在其父级前面，我希望它出现在父div之后。如果我将伪类的z-index设置为-1，它最终会位于navbarContainer div后面，并且将父z-index更改为更高的值并不会产生差异。

我尝试使用z-index来改变不同组件的堆叠顺序，但无法让它工作，所以希望有人可以帮助我：）

希望有道理！如果没有，我已经创建了一个演示我的问题的jsfiddle：https://jsfiddle.net/x2w3u48e/ 基本上我试图获取红色父div后面的绿色伪元素，但不是在蓝色导航栏菜单后面。

Example picture of what I'm trying to achieve

（fyi我现在已经将伪类设为绿色，但它的颜色与其父颜色相同。最后，父级将包含一个汉堡包菜单按钮）

HTML：

<div id="navbarWrapper">
    <div id="navbarMenuLeft">
        <div id="hamburgerContainer"></div>
    </div>
</div>

CSS：

#navbarWrapper{
        background-color: #001E49;
        width: 100%;
        height: 68px;
        float: left;
        box-shadow: 0px 1px 10px #000; 
    }

    #navbarMenuLeft{
        float: left;
        height: 68px;
        padding: 0px;  
    }



    #hamburgerContainer{
        height: 68px;
        width: 70px;
        background-color: #E2003B;
        position: relative;
        left: 40px;
    }


    /*gives the container a skewed look*/
    #hamburgerContainer:before{
        background-color: green;
        content: '';
        display: block;
        height: 100%;
        width: 40%;
        position: relative;
        right: 18px;
        transform: skewX(-15deg);
        transform-origin: 100%;
    }

提前致谢！

Answer 1

工作小提琴：https://jsfiddle.net/61mt7usu/

总结是伪元素往往像它们所附着的元素的子元素一样，因此很难将它们隐藏在父元素后面。我在小提琴中实现的一个解决方案是只交换父和子并相应地调整边距，以便父元素是最低层。

注意，由于父级现在有一个倾斜，因此伪元素需要具有相反的倾斜才能显示为直线。

相关的CSS更改：

#hamburgerContainer {
  background-color: green;
  display: block;
  height: 68px;
  width: 28px;
  position: relative;
  left: 22px;
  transform: skewX(-15deg);
  transform-origin: 100%;
}

/*gives the container a skewed look*/
#hamburgerContainer:after {
  content: '';
  display: block;
  height: 68px;
  width: 70px;
  position: relative;
  background-color: #E2003B;
  left: 18px;
  transform: skewX(15deg);
  transform-origin: 100%;
}