为什么z-index不能在Chrome中使用CSS列？

我遇到了使用z-index我的多列布局的问题column-count.我希望将单击的div移动到列表顶部.animate(),但是当我单击右列上的元素时,它会在左列的元素后面.这适用于Firefox,但它在Chrome中不起作用.

有任何想法吗？

function gotoTop(element) {
    var destinationTop = $('.categories').offset().top;
    var elementOffsetTop = $(element).offset().top;
    var distanceTop = (elementOffsetTop - destinationTop);
    return distanceTop;
}

function gotoLeft(element) {
    var destinationLeft = $('.categories').offset().left;
    var elementOffsetLeft = $(element).offset().left;
    var distanceLeft = (elementOffsetLeft - destinationLeft);
    return distanceLeft;
}
$('.category').on('click', function () {
    $(this).css('position', 'relative');
    $(this).css('z-index', '9999');
    $(this).siblings().css('z-index', '10');
    $(this).animate({
            top: '-' + gotoTop(this) + 'px',
            left: '-' + gotoLeft(this) + 'px'
        }, 2000
    );
});

.categories {
    width: 500px;
    font-size: 12px;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 7px;
    -webkit-column-gap: 7px;
    column-gap: 0px;
    background: grey;
}

.category {
    list-style: none;
    padding-left: 0;
    display: inline-block;
    width: 100%;
    min-height: 26px;
    border-left: 1px groove black;
    cursor: pointer;
    -webkit-column-break-inside: avoid;
    border-bottom: 2px groove #666;
    font-size: 13px;
    border-right: 1px solid #000;
    background: black;
    color: white;
}

    

        
Div 1
    
    

        
Div 2
    
    

        
Div 3
    
    

        
Div 4
    
    

        
Div 5
    
    

        
Div 6
    
    

        
Div 7
    
    

        
Div 8
    
    

        
Div 9
    
    

        
Div 10
    
    

        
Div 11
    
    

        
Div 12
    
    

        
Div 13
    
    

        
Div 14
    
    

        
Div 15
    
    

        
Div 16
    
    

        
Div 17
    
    

        
Div 18