How to stack elements without using z-index

I have this code:

<nav>
        <div class="slider" id="slider"></div>
        <div class="titleGroup">
            <h2 onclick="selectArticles()" id="articlesButton" class="active">Articles</h2>
            <h2 onclick="selectSocial()" id="socialButton">Social</h2>
        </div>
        
    </nav>

I need to make the slider appear on top of titleGroup but under its h2 childs, is there a way to do it using javascript? Making the h2s appear on top of everything would work too.

I tried doing it with z-index but obviously it doesn’t work because z-index is relative to the parent.