element is position absolute but must still relative in parentDiv to make it like slider

So my problem here is that I want to make a slider in parentDiv but I make a simple example which is when I click the item it will become the main screen of the screen border…but in opposite when I click it over again it will turn back.. I’m using gsap but you don’t have to worried about the gsap functionality because I just used it to make it simplier my animation but the logics of positioning does matter to me.

Here’s the codepen. https://codepen.io/yowyow3322/pen/GRQVevr

Also I put something here in the div just to make it more clarify.

    <!-- <div class="parentDiv"> -->
        <div class="stapler stapler1"></div>
        <div class="stapler stapler2"></div>
        <div class="stapler stapler3"></div>
    <!-- </div> -->

So what’s my point here? I want to make the stapler slider but that will be absolutely impossible because parentDiv is a position relative so that it will not off bounds the items when I will create it for sliding. It kind of seems impossible to me but I saw it somewhere in Pinterest which close to the idea of it.

Answer

As each div will be a layer on it’s own, You need to manage that each layer should has a z-index more than the last layer by one. you can do that by JS