堆叠上下文
本文試著先解釋一下堆疊順序是什么，在引入堆疊上下文。
MDN上這樣解釋堆疊上下文：
層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視窗或者網頁的用戶的z軸上延伸，HTML元素依據其自身屬性按照優先級順序占用層疊上下文的空間。
平時我們瀏覽網頁時，可以理解為從網頁的正視圖方向觀看，理解堆疊上下文時，我們試著從側視圖的方向理解。方方老師說CSS的一個很重要的學習方法就是實驗法，本文試著將所有的結論都有實驗的依據。（祝福我吧，希望可以不看回放。。。）
首先，我們先思考一下，border和background的先后關系：
<body><div class="demo"></div> </body><style>.demo{width: 100px;height: 100px;border: 10px solid rgba(255,0,0,0.5);background: green;} </style>效果圖：
可見，background < border；接著，我們在父元素里加一個div，觀察一下border和子元素div的關系：
<body><div class="parent"><div class="child"></div></div> </body><style>.parent{width: 100px;height: 100px;border: 10px solid red;}.child{width: 30px;height: 30px;background: blue;margin-left: -5px;} </style>
效果：
由此得出，border<子元素塊級元素div，如果元素浮動起來呢？
<body><div class="parent"><div class="child"></div><div class="float"></div></div> </body><style>.parent{width: 100px;height: 100px;border: 10px solid red;}.child{width: 30px;height: 30px;background: blue;}.float{width: 40px;height: 40px;background: rgba(0,255,0,0.7);float: left;margin-top: -10px;} </style>
效果：
浮動元素在塊級元素div之上，那么內聯元素捏，是不是也會被浮動元素蓋住？在上面的代碼中加入span元素。
<span class="inline">你好</span>span{margin-left: -10px; }效果：
所以內聯元素在浮動元素之上，到現在我們的順序是這樣的，background<border<div<float<inline（內聯）。
在說浮動元素時，我們經常說這樣一句話：浮動元素脫離文檔流，還有一種元素也脫離文檔流，那就是定位的元素，例如：相對/絕對定位。
<div class="relative"></div>span{margin-left: -20px; } .relative{width: 30px;height: 30px;background: orange;position: relative;margin-top: -15px; }
效果：
相對定位的元素將在浮動元素上面的內聯元素蓋住了，所以內聯元素<相對定位元素。兩個性質相同的元素，后出現的會覆蓋先出現的元素，例如：
<div class="relative"></div> <div class="absolute"></div>.relative{width: 30px;height: 30px;background: orange;position: absolute; } .absolute{width: 40px;height: 40px;background: rgba(0,0,0,0.5);position: absolute; }
效果圖：
黑色背景的div把黃色背景的覆蓋住了，但是如果我們把黃色背景的z-index設置一個除了0和auto的正值，就會有改變：
給.relative類加上這樣一句話：z-index: 1;效果如下：
當z-index的值為負數時，會出現在哪呢？
<div class="parent"><div class="relative"></div><div class="absolute"></div> </div><style>.parent{width: 100px;height: 100px;border: 10px solid red;position: relative;background: green;}.relative{width: 30px;height: 30px;background: orange;position: absolute;left: 50px;}.absolute{width: 40px;height: 40px;background: black;position: absolute;} </style>
現在的效果是：
當把黃色部分的設置z-index: -1時，同時把父子元素的背景設置為半透明的，效果變成了：
說明，當z-index的值為負數時，是在background的后面的；
綜上，z-index<0 ?==> background ==> border?==> div?==> 浮動元素?==> 內聯元素?==> 定位元素 ==> z-index>0，以上8層。
如果我們把position: relative的父元素設置z-index: -1，會發現子元素中z-index: -1的元素跑到了background上面，但是在div的下面。
<div class="parent"><div class="child"></div><div class="relative"></div><div class="absolute"></div> </div><style>.parent{width: 100px;height: 100px;border: 10px solid red;position: relative;background: rgba(0,255,0,0.5);z-index: 0;}.child{width: 40px;height: 40px;background: rgba(30,30,230,0.5);}.relative{width: 30px;height: 30px;background: orange;position: absolute;left: 30px;top: 10px;z-index: -1;}.absolute{width: 40px;height: 40px;background: black;position: absolute;} </style>效果：
這是為什么呢，我們就這樣從堆疊順序的介紹過渡到堆疊上下文的概念，不生硬對吧。。。
因為position: relative 和 z-index不為auto形成了堆疊上下文，所以，類relative這個元素應該在parent形成的堆疊上下文里面。
mdn上列出了一下幾種情況形成堆疊上下文：
- 根元素 (HTML),
- z-index 值不為 "auto"的?絕對/相對定位，
- 一個 z-index 值不為 "auto"的?flex 項目 (flex item)，即：父元素 display: flex|inline-flex，
- opacity?屬性值小于 1 的元素（參考?the specification for opacity），
- transform?屬性值不為 "none"的元素，
- mix-blend-mode?屬性值不為 "normal"的元素，
- filter值不為“none”的元素，
- perspective值不為“none”的元素，
- isolation?屬性被設置為 "isolate"的元素，
- position: fixed
- 在?will-change?中指定了任意 CSS?屬性，即便你沒有直接指定這些屬性的值（參考?這篇文章）
- -webkit-overflow-scrolling?屬性被設置 "touch"的元素
?
?
?
轉載于:https://www.cnblogs.com/CCCLARITY/p/8290403.html
總結
- 上一篇： ECharts 之 环形图
- 下一篇： NPOI的excel导出1