為什么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)');

這將正確堆疊元素，以便您單擊的元素位於頂部。

我已經更新了你的小提琴： 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-count如何在DOM中運行，但我認為它創建了兩個部分（您的兩列），並且所有這些<ul>都是該列的子項，並且這些列不能相互重疊。 如果元素B位於元素A的頂部，則使用z-index ，元素A的子元素永遠不會高於元素B.我認為這是一個例子。

在這里，我創建了一個pluncker ，你可以看到更好

Answer 4

我更新了你的小提琴。 您不需要使用column-gap和column-count 。 只需使用css的float屬性。 觀看這個小提琴沒有javascript的變化。 只是一個改變。 我希望這能解決您的問題（適用於所有瀏覽器）

更新小提琴