今天在做頁(yè)面布局的時(shí)候遇到一種場(chǎng)景，在nav模塊中做一個(gè)滑塊效果，效果塊使用了絕對(duì)定位脫離了文檔流，覆蓋到了菜單上，通過(guò)z-index調(diào)整無(wú)效，后經(jīng)多次嘗試找到解決方案，現(xiàn)在總結(jié)一下分享給各位童鞋，如有其它方式實(shí)現(xiàn)請(qǐng)留言指正~~~

話不多說(shuō)，代碼奉上！

code init

代碼結(jié)構(gòu)如上，現(xiàn)在我要添加滑塊效果，因?yàn)榛瑝K效果要在整個(gè)ul上隨時(shí)移動(dòng)，因此我將滑塊效果做到一個(gè)空的li標(biāo)簽上，則代碼結(jié)構(gòu)變成如下模樣：

add bar

此時(shí)給ul添加position: relative;類bar添加position: absolute;發(fā)現(xiàn)bar整個(gè)蓋住了第一個(gè)li，通過(guò)給li和bar添加z-index屬性試圖調(diào)整渲染層級(jí)，發(fā)現(xiàn)根本沒(méi)有作用，如果bar層級(jí)調(diào)成負(fù)值則被整個(gè)ul覆蓋。

經(jīng)過(guò)多次嘗試，最終當(dāng)給li添加position: relative;屬性后，z-index屬性開(kāi)始起作用；?

反思整個(gè)過(guò)程，html元素在設(shè)置定位方式之后會(huì)附帶上一個(gè)層級(jí)指針，計(jì)算元素的頁(yè)面位置，這樣z-index才能真正起作用；

最終的效果圖是這樣的：?

final

end。?

希望有相同困惑的童鞋，可以嘗試使用方法。有更好的方式，也希望童鞋不吝賜教，在后面留言哦~~