今天在做页面布局的时候遇到一种场景，在nav模块中做一个滑块效果，效果块使用了绝对定位脱离了文档流，覆盖到了菜单上，通过z-index调整无效，后经多次尝试找到解决方案，现在总结一下分享给各位童鞋，如有其它方式实现请留言指正~~~
话不多说，代码奉上！
code init
代码结构如上，现在我要添加滑块效果，因为滑块效果要在整个ul上随时移动，因此我将滑块效果做到一个空的li标签上，则代码结构变成如下模样：
add bar
此时给ul添加position: relative;类bar添加position: absolute;发现bar整个盖住了第一个li，通过给li和bar添加z-index属性试图调整渲染层级，发现根本没有作用，如果bar层级调成负值则被整个ul覆盖。
经过多次尝试，最终当给li添加position: relative;属性后，z-index属性开始起作用；
反思整个过程，html元素在设置定位方式之后会附带上一个层级指针，计算元素的页面位置，这样z-index才能真正起作用；
最终的效果图是这样的：
final
end。
希望有相同困惑的童鞋，可以尝试使用方法。有更好的方式，也希望童鞋不吝赐教，在后面留言哦~~
网友评论