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

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 > -->
        <div ></div>
        <div ></div>
        <div ></div>
    <!-- </div> -->

So what's my point here? I just want that 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 kinda seems impossible to me but I saw it somewhere in pinterest which close to the idea of it.

CodePudding user response：

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