我遇到了使用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)