代码之家 › 专栏 › 技术社区 › Matías Cánepa

z索引和转换的问题

css-transforms z-index css html

Matías Cánepa · 技术社区 · 8 年前

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

我的问题与一个丢失的文件有关 z-index 当应用转换时。

div 以明确的方式 z指数 ,它有一个没有 z指数 div 包含一个具有 z指数

在某个点上,我旋转这个兄弟姐妹,它的孩子失去了平衡 z指数 .

我怎样才能防止这种情况发生?

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

<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;
}

$(".drag").draggable();

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

https://jsfiddle.net/2zkn9dap/

2 回复 | 直到 8 年前

dukedevil294 8 年前

你在生活中的转变 .rotated 类创建一个新的堆叠上下文,该上下文正在更改元素的分层顺序。这里有一个非常详细的解释: z-index is canceled by setting transform(rotate)

解决此问题的最佳方法是移动 .drag div将成为 .overlay 和 .some_container .一些集装箱 div优先。

Patrick the Star 8 年前

  $("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”)。