z 索引和变换的问题

Question

以前有人问过这个问题，但似乎没有一个答案对我有用。

我的问题与应用转换时丢失z-index有关。

我有一个具有定义z-index的叠加div，它有一个没有z-index的兄弟姐妹，这个div包含一个z-index大于覆盖层的孩子。这个孩子可以拖来拖去。

在某个时候，我轮换了这个兄弟姐妹，它的孩子失去了z-index。

如何防止这种情况发生？

我尝试了几种解决方案，例如transform-style: flat;或transform-style: preserve-3d;但没有运气

这是代码

.HTML

<div class="main">
<div class="some_container">
<div class="drag"></div>
</div>
</div>
<div class="overlay"></div>
<br><br><br>
<button>rotate!</button>

.CSS

body {
padding: 20px
}
div {
border: 1px solid black;
width: 50px;
height: 50px;
}
.main {
border: 1px dashed blue;
padding: 15px;
}
.some_container {
position: relative;
background-color: green;
}
.overlay {
background-color: red;
position: absolute;
left: 35px;
top: 35px;
z-index: 5
}
.drag {
position: relative;
width: 30px;
height: 30px;
background-color: lime;
z-index: 10;
cursor: move;
}
.rotated {
transform: rotateZ(15deg);
}
.rotated .drag {
background-color: yellow;
transform: rotateZ(-15deg);
position: relative;
z-index: 100;
transform-style: flat;
}

.JS

$(".drag").draggable();
$("button").click(function()
{
$(".some_container").addClass("rotated");
});

小提琴：https://jsfiddle.net/2zkn9dap/

Answer 1

.rotated类中的转换将创建一个新的堆叠上下文，该上下文正在更改元素的分层顺序。可以在此处找到更详细的解释：通过设置变换(旋转(取消 z 索引

解决此问题的最佳方法是将.dragdiv 移动到.overlay和.some_containerdiv 的同级。然后更新您的 JS 以将旋转的类添加到绿色和黄色方块中，以便它们都旋转。否则，您将永远无法始终将黄色方块放在红色方块的顶部，因为父项的 z 索引(在本例中为.some_containerdiv(优先。

Answer 2

$("button").click(function(){
$(".green").addClass("rotated")
$(".lime").addClass("rotated").css({backgroundColor: 'yellow'});
});

body {
padding: 20px
} 
div {
border: 1px solid black;
width: 50px;
height: 50px;
}
.container {
border: 1px dashed blue;
padding: 15px;
}
.green {
position: absolute;
background-color: green;
z-index: 2;
} 
.red {
background-color: red;
position: absolute;
left: 35px;
top: 35px;
z-index: 3;
}
.lime {
position: absolute;
width: 30px;
height: 30px;
background-color: lime;
z-index: 4;
cursor: move;
}
.rotated {
transform: rotateZ(15deg);
}

<div class="container">
<div class="green">
</div>
<div class="lime"></div>
</div>
<div class="red"></div>
<br><br><br>
<button>rotate!</button>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

将position: relative更改为.lime的绝对值。 如果您不想旋转".lime"div，请删除脚本第 4 行的".addClass("rotated"(。