如何在tailwindcss中使用z-index将元素隐藏在父元素后面？

Question

The goal is to hide an element behind a parent. There is a relative parent position, and a fixed child position, so when you scroll down, the fixed child will become visible and the parent will go up.

The image with yellow border shall go behind

Here's what I've tried:

<!-- hamburger menu -->
<div class="relative bg-white z-50 border-2 border-purple-900 w-[34%] h-auto flex justify-end items-center">
    <div class="fixed top-6 right-1 z-20 border-2 border-yellow-500">
        <a class="lg:hidden inline-block float-right text-red-600 mr-[3px] mt-1 p-[6px] bg-white rounded-full border-2 border-yagya-red" href="#">
            <button id="mobile_menu1" class="relative outline-none w-7 h-7">
                <div role="hidden" id="line" class="inset-0 w-4 h-0.5 m-auto rounded-full bg-yagya-red transition duration-300"></div>
                <div role="hidden" id="line2" class="inset-0 w-4 h-0.5 mt-1 m-auto rounded-full bg-yagya-red transition duration-300"></div>
                <div role="hidden" id="line2" class="inset-0 w-4 h-0.5 mt-1 m-auto rounded-full bg-yagya-red transition duration-300"></div>
            </button>
        </a>
    </div>
</div>

thank you!

Answer 1

To add a z-index you have to use class:

• z-10 : To bring that element forward
• -z-10 : To bring that element backward

You can take the below example

 <script src="https://cdn.tailwindcss.com"></script> <!-- red with positive z-index --> <div class="p-10"> <div class="w-24 h-24 bg-red-600 rounded-full z-10 absolute"></div> <div class="w-24 h-24 bg-blue-600 rounded-full mt-10"></div> </div> <!-- red with negative z-index --> <div class="p-10"> <div class="w-24 h-24 bg-red-600 rounded-full -z-10 absolute"></div> <div class="w-24 h-24 bg-blue-600 rounded-full mt-10"></div> </div>

FInd more here