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
  • 相关阅读:
    Win10系统怎么彻底关闭Windows defender?
    用 winrar 解压 haozip 分卷压缩包的方法
    关闭WordPress自动保存和文章修订功能
    WordPress中Invalid argument supplied for foreach()错误原因及解决办法
    C#PDF转图片
    VS使用Nuget教程详解 Visual Studio 安装第三方的组件库
    kafka源码阅读环境搭建
    博客园主题美化
    官方文档
    [UGUI]UI特效裁剪
  • 原文地址:https://www.cnblogs.com/leeke98/p/10144458.html
Copyright © 2011-2022 走看看