为什么“z-index”对于具有变换的元素不起作用：translateY（） [英] Why "z-index" does not work for element having transform: translateY()

问题描述

以下是摘录：

.up {background-color：red; height：100px; z-index：100;}。down {background-color：yellow; height：100px;宽度：50％;保证金：0汽车; z-index：1; transform：translateY（-50％）;}

< div class =up>< / div>< div class =down>< / div>

可以看出， .up 元素具有更高的 z-index code>比 .down 元素。然而， .down 元素仍然以某种方式位于 .up 元素的前面。

有人对此有何看法？如何解决这个问题？

解决方案



1. z-index 工作位置必须作为绝对，相对或固定。向 .down 元素添加 position：relative;
   
2. 没有父子层次结构，应该应用负面的 z-index 使元素落后。

演示

.up {background-color：red;不透明度：0.5; / *对于演示目的* / height：100px; / * z-index：100; / *不需要。不工作＃1 * /}。down {background-color：yellow; height：100px;宽度：50％;保证金：0汽车; z-index：-1; / *更新这个* / transform：translateY（-50％）;位置：相对; / *添加这个* /}

< div class =

>

Below is the snippet:

.up {
  background-color: red;
  height: 100px;
  z-index: 100;
}
.down {
  background-color: yellow;
  height: 100px;
  width: 50%;
  margin: 0 auto;
  z-index: 1;
  transform: translateY(-50%);
}

<div class="up"></div>
<div class="down"></div>

As can be seen, the .up element has higher z-index than .down element. However, the .down element still locates in front of the .up element somehow..

Does anyone have ideas about this? How to fix this?

解决方案

1. For z-index to work position must be applied as absolute, relative or fixed. Add position: relative; to the .down element
2. As there is no parent-child hierarchy, negative z-index should be applied to make the element go behind.

Demo

.up {
  background-color: red;
  opacity: .5; /* For DEMO Purpose */
  height: 100px;
  /* z-index: 100; /* Not required. Not work #1 */
}
.down {
  background-color: yellow;
  height: 100px;
  width: 50%;
  margin: 0 auto;
  z-index: -1; /* Update this */
  transform: translateY(-50%);
  position: relative; /* Add this */
}

<div class="up"></div>
<div class="down"></div>

这篇关于为什么“z-index”对于具有变换的元素不起作用：translateY（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！