Why is z-index not working with CSS columns in Chrome?

Question

I am having a problem with the z-index of my multi-column layout created with column-count. I want to move the clicked div on top of the list with .animate(), but when I am clicking an element on the right column it goes behind the elements of the left column. This works fine on Firefox, but it doesn't work in Chrome.

Any ideas?

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

Use transform: translateZ instead of z-index.

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

This will stack the elements correctly so that the element you clicked on is on top.

I've updated your fiddle: http://jsfiddle.net/s2AfU/4/

Answer 2

Seems like Chrome creates a separate layer for each column, and you can't control its z-index. I'd suggest the solution with CSS3 Flexbox instead 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>