z-index with after pseudo

Question

私はハンバーガーメニューボタンを含むナビゲーションバーを構築しています。私はボタンを保持するためのコンテナを作成しましたが、私はそれをコンテナーに、私が行ったクラスの後で疑似の斜めの外観を与えたいと思っていました。

しかし、擬似クラスはその親の前に表示され、親divの後ろに表示されます。擬似クラスのz-indexを-1に設定すると、navbarContainer divの後ろに座ってしまい、親Z-indexをそれ以上の高さに変更しても差異は生じません。

私はさまざまなコンポーネントの重なり順を変更するには、Zインデックスで約遊んで試してみたが、それはそう誰かが私を助けることができる期待していた仕事を得ることはできません:)

希望は理にかなっている

！そうでない場合は、私の問題を示すjsfiddleを作成しました：https://jsfiddle.net/x2w3u48e/ 基本的に私は赤い親divの背後にある緑色の擬似要素を取得しようとしていますが、青色のナビゲーションバーメニューの背後にはありません。 （ちなみに私は今の容易さのために緑の疑似クラスを作ってきたが、それはその親と同じ赤い色になります。最終的に親がハンバーガーメニューボタンが含まれています）

HTML

Example picture of what I'm trying to achieve

：

<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%; 
    } 

ター事前にnks！

Answer 1

ワーキングフィドル：https://jsfiddle.net/61mt7usu/

概要は擬似要素は、それらが結合される要素の子供のように行動する傾向があるということですので、それは親の後ろにそれらを非表示にするのは難しいです。私がフィドルで実装した解決策の1つは、親要素と子要素を交換し、それに応じて余白を調整することです。その結果、親要素が最下位層になります。

親にスキューがあるので、psuedo要素のスキューを逆にして真っ直ぐにする必要があります。

関連する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%; 
}