前言
重新學(xué)習(xí)CSS后的第三天，學(xué)習(xí)制作陰影的過程中，發(fā)現(xiàn)的問題：
設(shè)置了box-shadow后展現(xiàn)的陰影：
添加transform:rotate(10deg);后的效果：
查看CodePen例子：陰影效果
一臉懵逼！再修改z-index完全沒有效果。
百度之后，找到了問題的答案，也自己摸索著找到了這個問題的解決辦法。下面與大家分享。
一、原因
- 給元素設(shè)置transform屬性會創(chuàng)建一個新的
stacking context，譯作層疊上下文的一個區(qū)域。 - 原本的層疊規(guī)則就會發(fā)生變化，導(dǎo)致了設(shè)置了transform的元素變成了一個層疊上下文容器，也就相當(dāng)于最底層。
- 與其他兄弟元素或者外層元素依然保持原來的層疊規(guī)則，影響的只是其子元素。
二、什么是層疊上下文
相信大家都知道，css是層疊樣式表，層疊上下文就是html文件渲染的時候，各個元素的堆疊規(guī)則，是css中非常重要的潛在規(guī)則。
詳細(xì)規(guī)則請點(diǎn)擊：層疊上下文和層疊順序
三、什么情況會創(chuàng)建新的區(qū)域
MDN上有相關(guān)的介紹：
- 根元素(HTML)
- 設(shè)置了position為absolute或relative，且z-index不是auto的元素
- 設(shè)置了z-index，且不為auto的流動元素
- 設(shè)置了opacity，且不為1的元素
- 設(shè)置了transform，且不為none的元素
- 設(shè)置了mix-blend-mode值，且不為normal的元素
- 設(shè)置了isolation 為 isolate的元素on mobile WebKit and Chrome 22+,
- 設(shè)置position為fixed的元素
四、解決辦法
不使用transform是不可能的了，那么該如何解決呢？我想到的辦法是再覆蓋，覆蓋掉不讓看見的東西。
1. 首先在元素里再創(chuàng)建一個標(biāo)簽
因?yàn)樵氐腷efore、after偽類都被占用了，只能再創(chuàng)建標(biāo)簽覆蓋。
2. 應(yīng)用新標(biāo)簽的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;
}
設(shè)置定位，以原來的元素為基準(zhǔn)，top、bottom、right、left為0，以充滿整個容器
注意：z-index的設(shè)置與原來元素的before、after中的z-index有關(guān)，必須比它的值大，不然after偽類又會顯示在上面。
參考
張鑫旭博文：深入理解css中的層疊上下文和層疊順序
Segmentfault回答：Transform 引起的 z-index "失效"
豆瓣文章：小心 CSS3 Transform 引起的 z-index "失效"
