如何在Tailwind CSS中使用z-index将元素隐藏于父元素后方？

需求说明 #

• 将带有黄色边框的子元素隐藏在相对定位（relative）的父元素后方
• 滚动页面时，父元素向上移动，子元素随之显现

尝试的代码 #

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

解决方案 #

核心修改 #

1. 调整z-index层级：fixed定位元素的层级不受父元素relative直接约束，需确保父元素z-index高于子元素。将子元素的z-20改为z-10（或更低，只要小于父元素的z-50），让父元素能遮挡子元素。
2. 利用父元素不透明背景：父元素已设置bg-white，滚动时父元素向上移动，原本被遮挡的子元素会逐渐显现。

修改后的代码 #

<!-- 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-10 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>

补充说明 #

• 若父元素仍无法遮挡子元素，检查页面其他元素的z-index是否更高，确保父元素层级足够。
• fixed定位基于视口，top-6 right-1固定了子元素位置，父元素滚动离开该区域后，子元素自然显现。

内容的提问来源于stack exchange，提问作者Divad