为Tailwind图片添加opacity-50后布局异常：图片遮挡头部元素

问题原因 #

核心是**堆叠层级（z-index）**冲突：

• 你的<header>用了fixed定位，但未设置z-index，处于默认堆叠层级
• 给<img>加opacity-50后，它的父元素会创建新的堆叠上下文，这个上下文的层级会高于未设置z-index的fixed元素，导致图片容器覆盖在header上方

解决方案 #

给<header>添加Tailwind的z-50类，手动提升堆叠层级，确保它始终显示在图片上方：

修改后的header标签：

<header class="overflow-hidden text-white fixed z-50">

完整修改代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./fonts/fontawesome-free-6.4.2-web/css/all.css">

    <title>Document</title>
    <style>
        @font-face {
            font-family: "Ubunto";
            src: url("./fonts/Ubuntu-Medium.ttf");
        }

        .fo-color {
            color: white;
        }
    </style>
</head>

<body>
    <div>
        <!-- 添加z-50提升堆叠层级 -->
        <header class="overflow-hidden text-white fixed z-50">
            <div class="grid grid-cols-2 w-screen h-14 bg-slate-600">
                <div class="mt-2 ml-6 text-2xl" style="font-family: Ubunto;">Logo</div>
                <nav class="flex justify-end ">
                    <a href="#" class="menu-open-btn absolute mt-3 mr-7">
                        <i class="fa-solid fa-bars fo-color fa-xl"></i>
                    </a>
                    <div
                        class="w-1/3 main-menu duration-300 h-screen bg-slate-600 fixed flex items-center top-0 right-0">
                        <a href="#" class="menu-close-btn absolute top-4 left-5">
                            <i class="fa-solid fa-x fa-xl fo-color"></i>
                        </a>
                        <ul class="">
                            <li class="hover:text-lime-600 duration-200 ml-5">Home</li>
                            <li class="hover:text-lime-600 duration-200 ml-5">About Us</li>
                            <li class="hover:text-lime-600 duration-200 ml-5">Contact</li>
                            <li class="hover:text-lime-600 duration-200 ml-5">Team</li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
        <div class="overflow-hidden">
            <div class="">
                <img src="./img/businesspeople.avif" alt="photo" class="h-auto w-screen bg-indigo-500 opacity-50">
            </div>
        </div>
    </div>


    <script>
        let main_menu = document.querySelector(".main-menu")
        let menu_open_btn = document.querySelector(".menu-open-btn")
        let menu_close_btn = document.querySelector(".menu-close-btn")

        menu_open_btn.addEventListener("click", () => {
            main_menu.classList.remove("translate-x-full")
            main_menu.classList.add("translate-x-0")
        })

        menu_close_btn.addEventListener("click", () => {
            main_menu.classList.remove("translate-x-0")
            main_menu.classList.add("translate-x-full")
        })
    </script>
    <script src="https://cdn.tailwindcss.com"></script>
</body>

</html>

补充说明 #

• 无需修改图片透明度或调整元素结构，只需保证fixed定位的header拥有更高的z-index即可
• Tailwind的z-50是预设的高优先级层级，足以覆盖页面普通元素的堆叠顺序

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