小编Mar*_*tir的帖子

为什么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
    );
});
Run Code Online (Sandbox Code Playgroud)
.categories {
    width: 500px;
    font-size: …
Run Code Online (Sandbox Code Playgroud)

javascript css google-chrome z-index css-multicolumn-layout

9
推荐指数
2
解决办法
1077
查看次数