堆疊順序
問(wèn)題：border和background是什么關(guān)系
A：他們是平齊的
B：border更垂直靠近用戶
C：background更垂直靠近用戶
給border的顏色加個(gè)半透明忿磅，結(jié)論為B
如果div里有文字屹电，那文字和border是什么關(guān)系柠新？
做個(gè)試驗(yàn)那伐，讓文字移動(dòng)（text-indent:-28px）與border有重合，去kankan
說(shuō)明文字比border更靠近用戶（垂直屏幕）
如果div里既有文字，還有一個(gè)子div，那么這文字和一起的div是什么關(guān)系？
發(fā)現(xiàn)文字在div上面
那如果div里有文字B欢伏，和上面的文字什么關(guān)系？
文字B會(huì)蓋住前面的文字亿乳，后面的蓋住前面的
同一個(gè)div里的浮動(dòng)元素和文字什么關(guān)系硝拧？
讓文字移動(dòng)下
文字比浮動(dòng)元素更靠近用戶
浮動(dòng)元素和同級(jí)的div（都是某一個(gè)div的子）什么關(guān)系？
浮動(dòng)元素更靠近用戶
浮動(dòng)元素如果有文字葛假，那么它其實(shí)是沒(méi)有外面的文字更靠近用戶的
同級(jí)比較障陶，那么就是誰(shuí)后就蓋住誰(shuí)
相對(duì)定位的relative比浮動(dòng)元素更靠近用戶
z-index只能給定位元素加，給其他元素加沒(méi)有作用
對(duì)于絕對(duì)定位呢聊训？
如果最外面的parent定位了呢（之前沒(méi)定位）
這個(gè)z-index為-1的盡然跑上來(lái)了
會(huì)跳到border和塊級(jí)元素之間
搜the stacking context 堆疊上下文
可以理解為堆疊作用域抱究。跟 BFC 一樣，我們只知道一些屬性會(huì)觸發(fā)堆疊上下文带斑，但并不知道堆疊上下文是什么鼓寺。
根元素 (HTML),
z-index 值不為 "auto"的 絕對(duì)/相對(duì)定位，
一個(gè) z-index 值不為 "auto"的 flex 項(xiàng)目 (flex item)勋磕，即：父元素 display: flex|inline-flex妈候，
opacity 屬性值小于 1 的元素（參考 the specification for opacity），
transform 屬性值不為 "none"的元素挂滓，
mix-blend-mode 屬性值不為 "normal"的元素州丹，
filter值不為“none”的元素，
perspective值不為“none”的元素杂彭，
isolation 屬性被設(shè)置為 "isolate"的元素，
position: fixed
在 will-change 中指定了任意 CSS 屬性吓揪，即便你沒(méi)有直接指定這些屬性的值（參考 這篇文章）
-webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素
a1和 b1的都是塊級(jí)元素亲怠，他們的堆疊上下文是html元素（relative的z-index是auto，所以不是堆疊上下文）
b在后面，b比a高
這個(gè)時(shí)候b1（z-index是0）蓋住了a1（z-index是2）
因?yàn)楦讣?jí)b比a高點(diǎn)叭首，那么b里的所有就比a里的所有高
