CSS columns hide ::before element with absolute position extending his own column

Question

on my site, I have triangles maded from borders of pseudo element :before. My problem is, if i add these triangles to elements in columns (column-count), triangles in not first column are hidden under previous column. Columns have column-gap set. I tried z-index: and it won't work.

Fiddle: http://jsfiddle.net/aq9Laaew/208715/

    .masonry{
      column-count: 3;
      column-gap: 1.5em;
    }
    
    .child {
      height: 400px;
      background: #EEE;
    }
    
    span{
      left: -20px;
      position: absolute;
      z-index: 2;
    }
    
    span:before{
      content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 1.5em .5em;
        border-color: transparent transparent #D36135 transparent;
        z-index: 2;
    }

<div class="container">
<div class="masonry p-1">
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
</div>
</div>

Answer 1

just add to .child this css:

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
backface-visibility: hidden;

http://jsfiddle.net/aq9Laaew/208715/

<div class="container">
  <div class="masonry p-1">
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
  </div>
</div>

.masonry{
   column-count: 3;
   column-gap: 1.5em;
 }

.child {
   height: 400px;
   background: #EEE;
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
   page-break-inside: avoid; /* Firefox */
   break-inside: avoid; /* IE 10+ */
   backface-visibility: hidden;
}

span{
   left: -20px;
   position: absolute;
   z-index: 2;
}

span:before{
   content: "";
   display: inline-block;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 0 1.5em .5em;
   border-color: transparent transparent #D36135 transparent;
   z-index: 2;
}