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

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.

column-count

column-gap

z-index:

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>

.masonry column-count: 3; column-gap: 0; .child height: 400px; background: #EEE; margin-left:1.5em;

.container overflow:hidden; .masonry column-count: 3; column-gap: 0; margin-left:-0.75rem; .child height: 400px; background: #EEE; margin-left:1.5rem;

4 Answers
4

Use h1position:relative; and .child margin-left:20px;

h1position:relative;

.child margin-left:20px;

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


.child
height: 400px;
background: #EEE;
margin-left:20px;


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

.position-relative
position:relative;


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>

Not sure what do you want, but if you want all triangles before the column then I have made some tweaks. I have moved all the span from h1 to parent div (.child) and added position:relative; to .child class.

You can also check it here.. http://jsfiddle.net/aq9Laaew/208868/

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

.child
height: 400px;
background: #EEE;
position:relative;
z-index:1;
margin-left:20px;


span
margin-left: -32px;

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


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

You can use a margin instead of column-gap, and set a negative margin on the container to align the left hand side:

column-gap

.container
overflow:hidden;

.masonry
column-count: 3;
column-gap: 0;
margin-left:-0.75rem;


.child
height: 400px;
background: #EEE;
margin-left:1.5rem;



just add to .child this css:

.child

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



Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.