Z-Index mit nach Pseudo

Question

Ich baue eine Navigationsleiste, die eine Hamburger-Menü-Taste enthalten wird. Ich habe einen Container erstellt, um den Button zu halten, aber ich wollte seinem Container einen schrägen Look geben mit der Pseudo-nach-Klasse, die ich gemacht habe.

Allerdings erscheint die Pseudoklasse vor ihrem Elternteil, und ich möchte, dass sie hinter dem Elternteil erscheint. Wenn ich den Z-Index der Pseudoklasse auf -1 setze, sitzt er hinter dem navbarContainer div, und die Änderung des übergeordneten z-Index auf etwas Höheres macht keinen Unterschied.

Ich habe mit dem z-Index über versuchte spielen die Stapelreihenfolge der verschiedenen Komponenten zu ändern, aber es nicht bekommen kann zu arbeiten, so hoffte, dass jemand mir helfen könnte :)

Hoffnung, dass Sinn macht ! Wenn nicht, habe ich ein Jfiddle erstellt, das meine Probleme demonstriert: https://jsfiddle.net/x2w3u48e/ Grundsätzlich versuche ich, das grüne Pseudo-Element hinter dem roten Eltern-Div zu bekommen, aber nicht hinter dem blauen Nav-Bar-Menü.

Example picture of what I'm trying to achieve

(FYI habe ich jetzt die Pseudo-Klasse grün für Leichtigkeit gemacht, aber es wird die gleiche rote Farbe wie seine Eltern sein. Schließlich wird die Eltern einen Hamburger Menü-Taste enthalten)

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

Tha im voraus!

Answer 1

Arbeits Fiddle: https://jsfiddle.net/61mt7usu/

Die Zusammenfassung ist, dass Pseudo-Elemente wie die Kinder der Elemente zu wirken, neigen sie dazu, gebunden sind, so ist es schwer, sie hinter dem Elternteil zu verbergen. Eine Lösung, die ich in der Geige implementiert habe, besteht darin, Eltern und Kind einfach zu tauschen und die Ränder entsprechend anzupassen, so dass das Elternelement die unterste Schicht ist.

Hinweis: Da der Elternteil jetzt einen Skew hat, muss das Pseudo-Element den entgegengesetzten Skew haben, um gerade zu erscheinen.

Der entsprechende CSS-Änderung:

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