如何在多个元素变换动画上保持 z-index 顺序？

Question

我只想在按下 alone-box toggle animation 按钮之前保持 z-index 顺序不变。 jsfiddle

function toggle_class() {if(document.getElementById('alone-boxes-wrapper').className == 'animated') document.getElementById('alone-boxes-wrapper').classList.remove('animated'); else document.getElementById('alone-boxes-wrapper').classList.add('animated');}

div.alone-box {
  position:absolute;
  z-index: 1;
  height: 100px;
  width:100px;
  background-color: #F4F1DE;
  opacity:0.9;
  border:1px dashed #000;
}

div.absolute-wrapper {
  position:absolute;
  top:20px;
}


div.wrapper {
  position:relative;
  height: 100px;
  width:100px;
  left: 50px;
}

div.wrapper .box-1 {
  position:absolute;
  z-index:0;
}

div.wrapper .box-2 {
  position:absolute;
  top: 20px;
  z-index:2;
}


@keyframes animation {
    from { transform: translateX(1rem); }
    to { transform: translateX(-1rem); }
}


div.wrapper.animated .box-1 {
  animation-name: animation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

#alone-boxes-wrapper.animated {
  animation-name: animation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

<div id="alone-boxes-wrapper">
  <div class="alone-box"></div> <!-- z-index: 1 -->
</div>


<div class="absolute-wrapper">

  <div class="wrapper animated">
    <div class="box-1">1111111111</div> <!-- z-index: 0 -->
    <div class="box-2">222222222</div> <!-- z-index: 2 -->
  </div>

</div>



<button type="button" style="position:absolute;top:120px" onClick="toggle_class()">alone-box toggle animation</button>

Answer 1

transform 的行为类似于 position:relative （如果未设置位置），因此 z-index 默认值变为 0 和子项框遵循这个新的堆叠上下文。

子框确实是 z-index:1，但在 z-index:0 的父框内。由于它首先被绘制，下一个在同一层上绘制的框将被绘制在它上面。

静态、相对、变换和 z-index 的示例：http://codepen.io/anon/pen/AXkzOB

您需要在分配的 class #alone-boxes-wrapper.animated

内的绝对框上设置 z-index

function toggle_class() {if(document.getElementById('alone-boxes-wrapper').className == 'animated') document.getElementById('alone-boxes-wrapper').classList.remove('animated'); else document.getElementById('alone-boxes-wrapper').classList.add('animated');}

div.alone-box {
  position:absolute;
  z-index: 1;
  height: 100px;
  width:100px;
  background-color: #F4F1DE;
  opacity:0.9;
  border:1px dashed #000;
}

div.absolute-wrapper {
  position:absolute;
  top:20px;
}


div.wrapper {
  position:relative;
  height: 100px;
  width:100px;
  left: 50px;
}

div.wrapper .box-1 {
  position:absolute;
  z-index:0;
}

div.wrapper .box-2 {
  position:absolute;
  top: 20px;
  z-index:2;
}


@keyframes animation {
    from { transform: translateX(1rem); }
    to { transform: translateX(-1rem); }
}


div.wrapper.animated .box-1 {
  animation-name: animation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

#alone-boxes-wrapper.animated {
  z-index: 1;/* here */
  animation-name: animation;
  animation-duration: 5s;  
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

<div id="alone-boxes-wrapper">
  <div class="alone-box"></div> <!-- z-index: 1 -->
</div>


<div class="absolute-wrapper">

  <div class="wrapper animated">
    <div class="box-1">1111111111</div> <!-- z-index: 0 -->
    <div class="box-2">222222222</div> <!-- z-index: 2 -->
  </div>

</div>



<button type="button" style="position:absolute;top:120px" onClick="toggle_class()">alone-box toggle animation</button>

或者在id里一次性搞定#alone-boxes-wrapper

function toggle_class() {if(document.getElementById('alone-boxes-wrapper').className == 'animated') document.getElementById('alone-boxes-wrapper').classList.remove('animated'); else document.getElementById('alone-boxes-wrapper').classList.add('animated');}

div.alone-box {
  position:absolute;
  z-index: 1;
  height: 100px;
  width:100px;
  background-color: #F4F1DE;
  opacity:0.9;
  border:1px dashed #000;
}

div.absolute-wrapper {
  position:absolute;
  top:20px;
}


div.wrapper {
  position:relative;
  height: 100px;
  width:100px;
  left: 50px;
}

div.wrapper .box-1 {
  position:absolute;
  z-index:0;
}

div.wrapper .box-2 {
  position:absolute;
  top: 20px;
  z-index:2;
}


@keyframes animation {
    from { transform: translateX(1rem); }
    to { transform: translateX(-1rem); }
}


div.wrapper.animated .box-1 {
  animation-name: animation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

#alone-boxes-wrapper.animated {
  animation-name: animation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}
#alone-boxes-wrapper {
      z-index: 1;/* here */
  }

<div id="alone-boxes-wrapper">
  <div class="alone-box"></div> <!-- z-index: 1 -->
</div>


<div class="absolute-wrapper">

  <div class="wrapper animated">
    <div class="box-1">1111111111</div> <!-- z-index: 0 -->
    <div class="box-2">222222222</div> <!-- z-index: 2 -->
  </div>

</div>



<button type="button" style="position:absolute;top:120px" onClick="toggle_class()">alone-box toggle animation</button>

更多信息在这里：http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892（分享自@seahorsepip）

如何在多个元素变换动画上保持 z-index 顺序？

How to keep z-index order on multiple elements transform animation?

css

z-index

css-transitions

css-animations