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

Question

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

<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)');

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

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

Answer 2

我认为这根本不可能。因为正如您所看到的，右侧的元素位于整个左列的后面。

我不知道column-countDOM 中的具体工作原理，但我认为它创建了两个部分（您的两列），并且所有这些<ul>都是该列的子级，并且这些列不能彼此重叠。如果z-index元素 B 位于元素 A 之上，则元素 A 的子元素永远不会高于元素 B。我认为这里就是这种情况。

在这里我创建了一个plunker这样你可以看得更清楚