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

Pulcheria

I have updated your css. And problem is solved. See my answer – Bradley

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/

Nativeborn

this is a Good one ;) – Ursala

This is a brilliant workaround, but I can't seem to get it to work in IE(11). Any ideas? – Ockham

In my case (can't show the markup sadly) but basically a list (<ul>) was wrapped in 5 columns with a gap. And I applied a hint.css tooltip that was "cut" - after trying some tricks, transform: scale3d(1,1,1) works best for a good result in chrome. – Serica

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>

Rightness

Answer 3

I think this is not possible at all. Because as you see the element on the right side are getting behind the whole left column.

I don't know how exactly column-count works in DOM, but I think it creates two parts (your two column), and all these <ul>s are children of that columns, and these column cannot overlap each other. And with z-index if an element B sits on top of element A, a child element of element A can never be higher than element B. I think this is a case here.

here I create a pluncker so you can see better

Ursala

Answer 4

I have updated your Fiddle. You didn't need to use column-gap and column-count. just use float property of css. Watch this fiddle no javascript change. Just a css change. I hope this will solve your problem(Working on all browsers)

Updated Fiddle

Bradley

How about sorting? You changed it with your CSS. – Rightness

Did you specifically want that order? I mean are the div sections has something to do with numbering – Bradley

I don't know. You said "You didn't need to use column-gap and column-count", but sorting in your code is not equivalent to the sorting in the question's code. – Rightness