一庸毫、層疊上下文 MDN
層疊上下文 是指網(wǎng)頁上的元素如何顯示在其他元素之上，就像您可以將桌面上的索引卡并排放置或相互重疊一樣。
當(dāng)元素重疊的時候竖般，會按照以下規(guī)則優(yōu)先顯示在離用戶更近的地方，如果兩個元素為普通元素茶鹃，在沒有以下指定特性的情況下涣雕，會按照后來居上的規(guī)則進行覆蓋。
image.png
二闭翩、機制
-
以下行為會建層疊上下文
image.png
定位元素和flex項可以設(shè)置z-index來控制層疊順序
其他方法的z-index為0級別,遵循后來居上原則
- 每一個元素都有自己的層疊上下文環(huán)境挣郭，默認(rèn)的是根元素，也就是HTML元素,但是為一個元素創(chuàng)建層疊上下文時候疗韵，該元素就成了該元素的所有子元素的層疊上下文環(huán)境兑障。
.box {
width: 100px;
height: 200px;
background: red;
position: relative;
}
.box img {
width: 200px;
position: absolute;
z-index: -1;
}
image.png
為什么圖片會在他的父元素背景的下面呢？
那是應(yīng)為上面說的所有元素默認(rèn)的層疊上下文環(huán)境是根元素蕉汪，按照我們層疊圖來看負值的z-index層疊元素會在塊級元素的后面旺垒，所以圖片會跑到父元素的后面，但是只要為把它的父元素變成層疊元素肤无，他的所有子元素就都會重新依賴于該父元素進行排序重疊先蒋。
.box {
width: 100px;
height: 200px;
background: red;
position: relative;
z-index: 0; // 把z-index修改為0，就可以創(chuàng)層疊上下文宛渐。
}
image.png
-
層疊上下文的一些行為
image.png
1.定位元素默認(rèn)z-index: auto可以看成是z-index：0竞漾；
如果普通元素與層疊上下文元素發(fā)生重疊的時候，具有層疊上下文的元素會覆蓋普通元素窥翩。
.a {
width: 100px;
height: 200px;
background: red;
}
.b {
width: 100px;
height: 100px;
background: yellow;
position: relative;
top: -150px;
}
image.png
2业岁、z-index層疊順序的比較止步于父級層疊上下文
層疊上下文是可以嵌套的，也就是一個層疊上下文元素的子元素可以建立自己的層疊上下文寇蚊。但是該元素的層疊上下文不作用于父級上下文之外笔时，該上下文只作用于該父級層疊上下文里面。
.a {
width: 100px;
height: 100px;
background: red;
position: relative;
z-index: 1;
}
.a .img {
position: absloute;
z-index: 999;
}
.b {
width: 100px;
height: 100px;
position: relative;
top: -10px;
z-index: 1;
}
.b .img {
position: absloute;
z-index: -1;
}
image.png
我們會發(fā)現(xiàn)就算.a盒子里面的圖片設(shè)置很大的z-index還是被設(shè)置-1的.b盒子里面的圖片給覆蓋仗岸，原因是.a和.b和都設(shè)置為層疊上下文元素允耿，而b的層疊順序比較高。
