前言

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

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

查看CodePen例子:阴影效果

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

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

一、原因

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

二、什么是层叠上下文

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

详细规则请点击:深入理解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伪类又会显示在上面。

参考

张鑫旭博文:深入理解css中的层叠上下文和层叠顺序Segmentfault回答:Transform 引起的 z-index “失效”
豆瓣文章:小心 CSS3 Transform 引起的 z-index “失效”

生命的意义不仅是活着,而是我们给别人的生命带来了何种不同。