javascript - 为什么 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

似乎 Chrome 为每一列创建了一个单独的层，你无法控制它的z-index. 我建议使用CSS3 Flexbox而不是 CSS3 Columns 的解决方案：

JSFiddle

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;
    height: 500px;
    font-size: 12px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    background: grey;
}

.category {
    list-style: none;
    padding-left: 0;
    display: inline-block;
    width: 240px;
    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>

Answer 3

我认为这根本不可能。因为如您所见，右侧的元素在整个左列的后面。

我不知道column-countDOM 究竟是如何工作的，但我认为它创建了两个部分（你的两列），并且所有这些<ul>s 都是该列的子级，并且这些列不能相互重叠。如果z-index元素 B 位于元素 A 的顶部，则元素 A 的子元素永远不会高于元素 B。我认为这里就是这种情况。

在这里，我创建了一个pluncker，以便您可以看得更清楚

Answer 4

我已经更新了你的小提琴。你不需要使用column-gapand column-count。只需使用floatcss 的属性。看这个小提琴没有 javascript 变化。只是一个CSS更改。我希望这能解决您的问题（适用于所有浏览器）

更新小提琴