Relatively positioned elements and absolute positioned elements hierarchical processing skills

Today, I encountered a scene when I was doing page layout. I made a slider effect in the nav module. The effect block used absolute positioning to be separated from the document flow and covered the menu. It was invalidated by z-index adjustment. Try to find a solution, now summarize and share with you children's shoes, if there are other ways to achieve, please leave a message to correct~~~

Without further ado, here is the code!

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

The code structure is as above, now I want to add the slider effect, because the slider effect needs to move on the entire ul at any time, so I put the slider effect on an empty li tag, and the code structure becomes as follows:

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

At this point, add position: relative to ul; add position: absolute to class bar; find that bar completely covers the first li, and try to adjust the rendering level by adding z-index properties to li and bar, and find that it has no effect at all, if the bar level If it is adjusted to a negative value, it will be covered by the entire ul.

After many attempts, finally, after adding the position: relative; attribute to li, the z-index attribute starts to work; after
reflecting on the whole process, the html element will be attached with a level pointer after setting the positioning method to calculate the page position of the element, so that z-index to really work;
end.
Hope to have the same confused children's shoes, you can try to use it. There is a better way, and I also hope that children's shoes will give me some advice, and leave a message later~~