Merhaba tailwind kullanarak bir proje üzerinde çalışıyorum, amacım slider üzerinde parallax yapmak ve bunu position:sticky özelliği ile yapıyorum. Aynı zamanda sayfayı scroll ederken slider sayfanın arkasında kalmasını istediğim için de z-index:-1 veriyorum. Diğer divlere de z-index:2 veriyorum. Fakat bu durumda a etiketleri çalışmıyor. Eğer z-index:1 verirsem çalışıyor fakat bu safari tarayıcında render problemi yaratıyor. Webkit kullandım fakat çözüme ulaşamadım, bu yüzden z-index:-1 ile işimi çözmek zorundayım. Kodlarımı ve test ortamını aşağıya bırakıyorum. Şimdiden teşekkürler.

Test ortamım burada tıklayarak ulaşabilirsiniz.

    <div id="parallax-block" class="grid justify-center grid-cols-24 parallax overflow-scroll">
        <div class="main-carousel col-start-1 col-end-25 flickity-enabled is-draggable" tabindex="0">
            
            
        <div class="flickity-viewport" style="height: 902.25px; touch-action: pan-y;"><div class="flickity-slider" style="left: 0px; transform: translateX(-100%);"><div class="carousel-cell w-full grid-cols-24 justify-center" style="position: absolute; left: 0px; transform: translateX(0%);" aria-hidden="true">
                <div class="flex col-start-1 col-end-25 relative">
                    <div class="absolute top-0 h-full w-full z-10">
                        <div class="px-8 md:px-2 h-full flex flex-col justify-center items-center text-center text-black">
                            <h1 class="leading-[3.5rem] md:leading-none mb-6 max-w-3xl md:text-7xl text-5xl font-windsorRegular"><span class="font-windsorBold">Tüm aboneliklere</span> ücretsiz gönderim</h1>
                            <a class="pointer-events-auto border-2 border-black hover:text-white hover:bg-black py-4 px-10 font-flexa text-black text-lg" href="https://dev.kronotrop.com.tr/alisveris/kategori/kahve-abonelikleri">Alışverişe Başla</a>
                        </div>
                    </div>
                    <div class="w-full relative">
                        <div class="phone w-full block md:hidden pb-[40%]">
                             <img class="w-full h-[750px] object-cover" src="https://dev.kronotrop.com.tr/assets/img/hero1.png" alt="">
                        </div>
                        <div class="desktop w-full hidden md:block ">
                            <img class="w-full" src="https://dev.kronotrop.com.tr/assets/img/hero1.png" alt="">
                        </div>
                    </div>
                </div>
            </div><div class="carousel-cell w-full grid-cols-24 justify-center is-selected" style="position: absolute; left: 0px; transform: translateX(100%);">
                <div class="flex col-start-1 col-end-25 relative">
                    <div class="absolute top-0 h-full w-full z-10">
                        <div class="px-8 md:px-2 h-full flex flex-col justify-center items-center text-center text-black">
                            <h1 class="leading-[3.5rem] md:leading-none mb-6 max-w-3xl md:text-7xl text-5xl font-windsorBold">Sahibi değil parçası olduğumuz: Doğa</h1>
                            <a class="pointer-events-auto border-2 border-black hover:text-white hover:bg-black py-4 px-10 font-flexa text-black text-lg" href="https://dev.kronotrop.com.tr/alisveris">Alışverişe Başla</a>
                        </div>
                    </div>
                    <div class="w-full relative">
                        <div class="phone w-full block md:hidden pb-[40%]">
                             <img class="w-full h-[750px] object-cover" src="https://dev.kronotrop.com.tr/assets/img/hero2.png" alt="">
                        </div>
                        <div class="desktop w-full hidden md:block ">
                            <img class="w-full" src="https://dev.kronotrop.com.tr/assets/img/hero2.png" alt="">
                        </div>
                    </div>
                </div>
            </div></div></div></div>
    </div>