Question

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

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

我有一个覆盖div，其中有一个已定义的z-index，它有一个没有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-index is canceled by setting transform(rotate)

解决此问题的最佳方法是将.drag div移动为.overlay和.some_container div的同级。然后更新您的JS，将旋转后的类添加到绿色和黄色正方形中，以便它们都被旋转。否则，您将永远无法始终获得红色正方形上方的黄色正方形，因为父对象的z索引（在这种情况下，.some_container div优先）。

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，则删除脚本第四行的`.addClass（“ rotated”）。

z-index和转换问题

2 个答案: