[英]Why is z-index not working with CSS columns in Chrome?
I am having a problem with the z-index
of my multi-column layout created with column-count
. 我遇到了使用
column-count
创建的多列布局的z-index
问题。 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. 我想用
.animate()
在列表顶部移动单击的div,但是当我单击右列上的元素时,它会在左列的元素后面。 This works fine on Firefox, but it doesn't work in Chrome. 这适用于Firefox,但它在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>
Use transform: translateZ
instead of z-index
. 使用
transform: translateZ
而不是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/ 我已经更新了你的小提琴: http : //jsfiddle.net/s2AfU/4/
Seems like Chrome creates a separate layer for each column, and you can't control its z-index
. Chrome似乎为每列创建了一个单独的图层,但您无法控制其
z-index
。 I'd suggest the solution with CSS3 Flexbox instead CSS3 Columns: 我建议使用CSS3 Flexbox而不是CSS3 Columns的解决方案:
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>
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. 我不知道
column-count
如何在DOM中运行,但我认为它创建了两个部分(您的两列),并且所有这些<ul>
都是该列的子项,并且这些列不能相互重叠。 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. 如果元素B位于元素A的顶部,则使用
z-index
,元素A的子元素永远不会高于元素B.我认为这是一个例子。
here I create a pluncker so you can see better 在这里,我创建了一个pluncker ,你可以看到更好
I have updated your Fiddle. 我更新了你的小提琴。 You didn't need to use
column-gap
and column-count
. 您不需要使用
column-gap
和column-count
。 just use float
property of css. 只需使用css的
float
属性。 Watch this fiddle no javascript change. 观看这个小提琴没有javascript的变化。 Just a css change.
只是一个改变。 I hope this will solve your problem(Working on all browsers)
我希望这能解决您的问题(适用于所有浏览器)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.