css - Z-Index issue with before and after of elements -

There is a problem involving the z-pointer I am stuck!

I got a container with a background shield above it was made with a shape (a hexagon) with a square (a div) and two triangles (before and after the div). I should have an image over the top of the image and I should have a ribbon at the top of the image Problem (as you can see in JS Friedal) is that before / after the ribbon and its shadow (which were made before and after the text ) Are not at the top of the size below

   & Lt; / Div & gt; & Lt; / Article & gt; & Lt; / Section & gt;  

My question is, what change do I need for the final result, whose picture I shared below? Hope you can help! Thanks!

This problem is a link to JS Friedl:

And here's a picture of how to look it out:

< / Html>