CSS3 多列和位置 :absolute

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 列截断了带有 position:absolute 的箭头部分。

示例: 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
}