CSS3 Multiple Columns and Position: Absolute

Question

I am using multiple CSS3 columns. Internal elements have a position: relative and may contain arrows with a position: absolute.

.clm3{
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}

Problem: The CSS3 column has disabled part of the arrow with the position: absolute.

Example: http://jsfiddle.net/k4ucr72h/

Answer 1

Try using this in lithe column:

.clm3 li {
  -webkit-column-break-inside: avoid;
  -webkit-backface-visibility: hidden; 
}

Also add z-indexto the .countArrowclass:

.countArrow {
  z-index: 1
}