前言
重新學習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僞類又會顯示在上面。
參考
張鑫旭博文：深入理解css中的層疊上下文和層疊順序
Segmentfault回答：Transform 引起的 z-index "失效"
豆瓣文章：小心 CSS3 Transform 引起的 z-index "失效"