Gitterlinien überlappen sich

Question

Ich habe ein Gitter an vier Ecken mit vier span Elemente gezeichnet. Plunker-Code ist here.

Nun, ich mag die vertikalen Balken oben auf den horizontalen Balken gezogen werden. Wie, gelber Balken muss über dem schwarzen und grünen Balken gezeichnet werden, mit dem ich meine, dass die sich überschneidenden Bereiche des Gitters gelb sein müssen. Ebenso muss der braune Balken über dem grünen Balken stehen.

Wie kann ich es erreichen?

Answer 1

einfach

.left, .right{ 
    z-index:1; 
} 

Um Ihren Code hinzufügen sollte den Trick