zoukankan      html  css  js  c++  java
  • Transform 引起的 z-index "失效"

    重新学习CSS后的第三天,学习制作阴影的过程中,发现的问题:
    设置了box-shadow后展现的阴影:

    添加transform:rotate(10deg);后的效果:

    查看CodePen例子:阴影效果

    一脸懵逼!再修改z-index完全没有效果。

    百度之后,找到了问题的答案,也自己摸索着找到了这个问题的解决办法。下面与大家分享。

    一、原因

    • 给元素设置transform属性会创建一个新的stacking context,译作层叠上下文的一个区域。
    • 原本的层叠规则就会发生变化,导致了设置了transform的元素变成了一个层叠上下文容器,也就相当于最底层。
    • 与其他兄弟元素或者外层元素依然保持原来的层叠规则,影响的只是其子元素。

    二、什么是层叠上下文

    相信大家都知道,css是层叠样式表,层叠上下文就是html文件渲染的时候,各个元素的堆叠规则,是css中非常重要的潜在规则。

    详细规则请点击:层叠上下文和层叠顺序

    三、什么情况会创建新的区域

    MDN上有相关的介绍:

    • 根元素(HTML)
    • 设置了position为absolute或relative,且z-index不是auto的元素
    • 设置了z-index,且不为auto的流动元素
    • 设置了opacity,且不为1的元素
    • 设置了transform,且不为none的元素
    • 设置了mix-blend-mode值,且不为normal的元素
    • 设置了isolation 为 isolate的元素on mobile WebKit and Chrome 22+,
    • 设置position为fixed的元素

    四、解决办法

    不使用transform是不可能的了,那么该如何解决呢?我想到的办法是再覆盖,覆盖掉不让看见的东西。

    1. 首先在元素里再创建一个标签
    因为元素的before、after伪类都被占用了,只能再创建标签覆盖。

    2. 应用新标签的before伪类

    .shadow5 p::before {
        content: "";
        position: absolute;
        z-index: -1;
        background: #fff;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
    }

    设置定位,以原来的元素为基准,top、bottom、right、left为0,以充满整个容器
    注意:z-index的设置与原来元素的before、after中的z-index有关,必须比它的值大,不然after伪类又会显示在上面。

    原文链接:https://www.jianshu.com/p/29623f046063
  • 相关阅读:
    Hostker云主机
    Orz 终于有了自己的博客地址
    BZOJ 1635: [Usaco2007 Jan]Tallest Cow 最高的牛
    BZOJ 1636: [Usaco2007 Jan]Balanced Lineup
    BZOJ 2252: [2010Beijing wc]矩阵距离
    BZOJ 2253: [2010 Beijing wc]纸箱堆叠
    BZOJ 无数据题集合
    BZOJ 1087: [SCOI2005]互不侵犯King
    BZOJ 3236: [Ahoi2013]作业
    POJ2352:Stars
  • 原文地址:https://www.cnblogs.com/leeke98/p/10144458.html
Copyright © 2011-2022 走看看