css - 为什么添加transform: translateY(0)属性，会增加相当于z-index?

问题描述

问 题

html

<div class="wrap">
    <div class="div1">
      <span>test</span>
    </div>
    <div class="div2"></div>
  </div>

css

.wrap{
    width: 100%;
    height: 500px;
    background: grey;
  }
  .div1{
    width: 100%;
    height: 80px;
    background: red;
    position: relative;
  }
  .div1 span{
    position: absolute;
    bottom: -40px;
    background: yellow;
    padding: 20px;
  }
  .div2{
    background: green;
    width: 100%;
    height: 50px;
    transform: translateY(0);
  }

.div2添加transform: translateY(0)属性之前

.div2添加transform: translateY(0)属性之后

解决方案

因为在使用 transform 属性后，div2 形成了一个层叠上下文，div1 因为是相对定位，也有层叠上下文，又没有指定 z-index,div2 在 div1 后面;

题主可以尝试 div2 放在 div1前面，把黄色块的 top 设置为 -40px;感受一下同样的层叠元素在文档顺序上是如何影响 z 轴展现的;

同样的还有 opacity 属性存在并且值不等于 1 的情况;

还有其它的 css 属性的使用会为元素创建层叠上下文。

这里附上几个链接给题主：

层叠上下文
理解z-index
不含 z-index的堆叠

这篇关于css - 为什么添加transform: translateY(0)属性，会增加相当于z-index?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！