CSS3多列和位置:绝对

Question

我正在使用CSS3多列.内部元素具有position:relative,并且可以包含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;
}

问题: CSS3列截断了部分箭头的位置:绝对值.

示例: http ://jsfiddle.net/k4ucr72h/

Answer 1

尝试li在列中的项目上使用此项:

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

也添加z-index到.countArrow类:

.countArrow {
  z-index: 1
}