今天在做页面布局的时候遇到一种场景，在nav模块中做一个滑块效果，效果块使用了绝对定位脱离了文档流，覆盖到了菜单上，通过z-index调整无效，后经多次尝试找到解决方案，现在总结一下分享给各位童鞋，如有其它方式实现请留言指正~~~

话不多说，代码奉上！

<nav>
    <ul>
        <li>Clothing</li>
        <li>Food</li>
        <li>Beauty</li>
        <li>Pets</li>
    </ul>
</nav>

代码结构如上，现在我要添加滑块效果，因为滑块效果要在整个ul上随时移动，因此我将滑块效果做到一个空的li标签上，则代码结构变成如下模样：

<nav>
    <ul>
        <li>Clothing</li>
        <li>Food</li>
        <li>Beauty</li>
        <li>Pets</li>
        <li class="bar"></li>
    </ul>
</nav>

此时给ul添加position: relative;类bar添加position: absolute;发现bar整个盖住了第一个li，通过给li和bar添加z-index属性试图调整渲染层级，发现根本没有作用，如果bar层级调成负值则被整个ul覆盖。

经过多次尝试，最终当给li添加position: relative;属性后，z-index属性开始起作用；
反思整个过程，html元素在设置定位方式之后会附带上一个层级指针，计算元素的页面位置，这样z-index才能真正起作用；
end。
希望有相同困惑的童鞋，可以尝试使用方法。有更好的方式，也希望童鞋不吝赐教，在后面留言哦~~