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

Question

我使用 column-count 创建的多列布局的 z-index 有问题。我想使用 .animate() 将单击的 div 移动到列表顶部，但是当我单击右列中的元素时，它会位于左列元素的后面。这在 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="categories">
    <ul class="category" id="1">
        <li>Div 1</li>
    </ul>
    <ul class="category" id="2">
        <li>Div 2</li>
    </ul>
    <ul class="category" id="3">
        <li>Div 3</li>
    </ul>
    <ul class="category" id="4">
        <li>Div 4</li>
    </ul>
    <ul class="category" id="5">
        <li>Div 5</li>
    </ul>
    <ul class="category" id="6">
        <li>Div 6</li>
    </ul>
    <ul class="category" id="7">
        <li>Div 7</li>
    </ul>
    <ul class="category" id="8">
        <li>Div 8</li>
    </ul>
    <ul class="category" id="9">
        <li>Div 9</li>
    </ul>
    <ul class="category" id="10">
        <li>Div 10</li>
    </ul>
    <ul class="category" id="11">
        <li>Div 11</li>
    </ul>
    <ul class="category" id="12">
        <li>Div 12</li>
    </ul>
    <ul class="category" id="13">
        <li>Div 13</li>
    </ul>
    <ul class="category" id="14">
        <li>Div 14</li>
    </ul>
    <ul class="category" id="15">
        <li>Div 15</li>
    </ul>
    <ul class="category" id="16">
        <li>Div 16</li>
    </ul>
    <ul class="category" id="17">
        <li>Div 17</li>
    </ul>
    <ul class="category" id="18">
        <li>Div 18</li>
    </ul>
</div>

JSFiddle

Answer 1

使用 transform: translateZ 代替 z-index。

$(this).css('transform','translateZ(1px)');
$(this).siblings().css('transform','translateZ(0px)');

这将正确堆叠元素，以便您单击的元素位于顶部。

我已经更新了你的 fiddle : http://jsfiddle.net/s2AfU/4/