如何将z-索引用于将元素隐藏在父元素后面？

Question

目标是隐藏父元素后面的元素。有一个相对的父位置和一个固定的子位置，所以当您向下滚动时，固定子位置将变得可见，而父子位置将上升。

带黄色边框的图像将在后面

​

​

以下是我尝试过的：

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

谢谢!

Answer 1

要添加z索引，必须使用类：

• z-10：将该元素向前推进
• -z-10：向后引入该元素

您可以以下面的例子为例

​

<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 这里