如何让Overlay遮罩不覆盖Header区域？附代码求助

问题核心是当前Overlay用了inset-0，会从页面顶部开始覆盖整个视口，包括Header区域。结合你的代码，直接调整Overlay的定位范围就能解决，不用纠结z-index的问题，具体步骤如下：

修改方案 #

1. 给包裹Header和Overlay的父容器加上relative定位，让Overlay的绝对定位基于这个父容器：

<div x-data="dropdown" class="bg-white relative">

2. 修改Overlay的类，把inset-0换成top-[64px] left-0 right-0 bottom-0（移动端Header高度是h-16，对应64px），让遮罩从Header底部开始延伸到页面底部：

<div @click="closeToggle" x-show="open" class="absolute top-[64px] left-0 right-0 bottom-0 z-20 w-full h-screen xl:hidden bg-black/50">

如果要适配不同屏幕尺寸的Header高度，可以用CSS变量更优雅：

• 先给Header设置高度变量：

<header style="--header-height: 64px;" class="relative z-40 flex flex-row-reverse items-center justify-between h-16 px-5 xl:px-20 xl:h-24 xl:flex-row gap-x-6 xl:container xl:justify-start">

• 然后修改Overlay的类：

<div @click="closeToggle" x-show="open" class="absolute inset-x-0 bottom-0 top-[var(--header-height)] z-20 xl:hidden bg-black/50">

后续调整不同屏幕的Header高度时，只需要更新--header-height的值即可。

为什么之前调整z-index没用？ #

因为你的Overlay和Header在同一个未设置定位的父容器里，Overlay的absolute是相对于<body>生效的，而Header的relative只是让自身内部的z-index生效，没法和基于body定位的Overlay形成层级对比。给父容器加上relative后，两者都基于父容器定位，此时z-index才会正常生效（不过这次我们直接调整Overlay范围的方案更直接）。

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