使用 ReactTS 和 TailwindCSS 的下拉菜单的 Z 索引不起作用

问题描述 投票：0回答：1

我的 z 索引有问题。我有一个导航栏，当我将鼠标悬停在文本上时，会出现一个下拉菜单。菜单和一切都按预期工作。问题是当创建菜单时，它不会位于英雄部分元素的“上方”。您可以看到两者都已渲染；下拉菜单以及英雄部分及其中的元素。 以下分别是导航栏元素和英雄部分的代码片段：

import React, { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { DownOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";

interface NavbarProps {
    children: React.ReactNode;
    href: string;
    FlyoutContent?: React.FC;
};

const Example = () => {
    return (
        <div className="flex justify-center px-3 py-12 relative !z-50">
            <FlyoutLink href="#" FlyoutContent={ProjectTypes}>
                <Link to="/projects" className="font-semibold text-xl">Projects</Link>
                <DownOutlined className="py-auto" />
            </FlyoutLink>
        </div>
    );
};

const FlyoutLink: React.FC<NavbarProps> = ({ children, href, FlyoutContent }) => {
    const [open, setOpen] = useState(true);

    const showFlyout = FlyoutContent && open;

    return (
        <div
            onMouseEnter={() => setOpen(true)}
            onMouseLeave={() => setOpen(false)}
            className="relative w-fit h-fit !z-50"
        >
            <a href={href} className="relative">
                {children}
                <span
                    style={{
                        transform: showFlyout ? "scaleX(1)" : "scaleX(0)",
                    }}
                    className="absolute -bottom-2 -left-2 -right-2 h-1 origin-left scale-x-0 rounded-full bg-indigo-300 transition-transform duration-300 ease-out"
                />
            </a>
            <AnimatePresence>
                {showFlyout && (
                    <motion.div
                        initial={{ opacity: 0, y: 15 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: 15 }}
                        transition={{ duration: 0.3, ease: "easeOut" }}
                        className="absolute left-1/2 top-12 !-translate-x-1/2 w-[calc(100vw-17px)] !z-50"
                    >
                        <div className="absolute -top-6 left-0 right-0 h-6 bg-transparent" />
                        <div className="absolute left-1/2 top-0 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rotate-45" />
                        <FlyoutContent />
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    );
};

const ProjectTypes = () => {
    return (
        <div className="shadow-xl pb-8 relative !z-[100]">
            <div className="menu-projects-wrapper grid grid-cols-2 grid-rows-2 gap-x-4">
                <div className="subproject-container flex gap-x-2 border-b-2 border-b-black py-4">
                    <h3 className="text-black/50">/01</h3>
                    <h1 className="text-2xl font-medium">GitHub Projects</h1>
                    <div className="arrow-container flex justify-center items-center w-8 h-8">
                        <img src="https://cdn.prod.website-files.com/66bf407255e2bbac50fde356/66bf9e7b27401f68266d92b9_Arrow%20-%20Right.svg" alt="Arrow"></img>
                    </div>
                </div>
                <div className="subproject-container flex gap-x-2 border-b-2 border-b-black py-4">
                    <h3 className="text-black/50">/02</h3>
                    <h1 className="text-2xl font-medium">School Projects</h1>
                    <div className="arrow-container flex justify-center items-center w-8 h-8">
                        <img src="https://cdn.prod.website-files.com/66bf407255e2bbac50fde356/66bf9e7b27401f68266d92b9_Arrow%20-%20Right.svg" alt="Arrow"></img>
                    </div>
                </div>
                <div className="subproject-container flex gap-x-2 border-b-2 border-b-black py-4">
                    <h3 className="text-black/50">/02</h3>
                    <h1 className="text-2xl font-medium">School Projects</h1>
                    <div className="arrow-container flex justify-center items-center w-8 h-8">
                        <img src="https://cdn.prod.website-files.com/66bf407255e2bbac50fde356/66bf9e7b27401f68266d92b9_Arrow%20-%20Right.svg" alt="Arrow"></img>
                    </div>
                </div>
                <div className="subproject-container flex gap-x-2 border-b-2 border-b-black py-4">
                    <h3 className="text-black/50">/02</h3>
                    <h1 className="text-2xl font-medium">School Projects</h1>
                    <div className="arrow-container flex justify-center items-center w-8 h-8">
                        <img src="https://cdn.prod.website-files.com/66bf407255e2bbac50fde356/66bf9e7b27401f68266d92b9_Arrow%20-%20Right.svg" alt="Arrow"></img>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Example;  

import { Button } from "antd";
import { Link } from "react-router-dom";

const HeroSection = () => {
    return (
        <div className="hero-container py-20 min-[480px]:pt-24 min-[480px]:pb-10 relative z-0">
            <div className="main-container px-4 md:px-6">
                <div className="title-wrap-hero flex flex-col items-center gap-y-6">
                    <hr className="w-24 h-3 m-auto bg-gradient-to-r from-white to-black rounded-e-lg" />
                    <div className="w-full max-w-[1008px]">
                        <h2 className="text-5xl font-bold text-center md:text-6xl lg:text-7xl 2xl:text-8xl">Hi! I'm Patrik Bajzík</h2>
                    </div>
                    <div className="w-full max-w-[600px]">
                        <p className="text-center font-normal lg:text-xl 2xl:text-2xl">I am a full stack programmer and software developer <br />
                            based in Trnava, Slovakia.</p>
                    </div>
                    <div className="mt-4 lg:w-60 2xl:w-72">
                        <Button
                            className="flex justify-center items-center px-6 py-2 min-w-[200px] w-full h-[52px] bg-black text-white font-medium lg:px-8 lg:py-4 lg:h-16 lg:text-xl lg:rounded-xl 2xl:px-10 2xl:py-6 2xl:h-20 2xl:rounded-2xl 2xl:text-2xl hover:!bg-black/80 hover:!text-white"
                            value="Go to Contact">
                            <Link to="/contact">Contact Me</Link>
                        </Button>
                    </div>
                </div>
            </div>
        </div >
    );
};

export default HeroSection;

当然，这些元素会像这样进入

App.tsx
：

<>
    <Navbar />
    <HeroSection />
</>

我尝试了几件事，但这根本不起作用：

  1. 对每个 div 标签进行 z 索引，甚至给它们 
    !important
    标签
  2. 对于那些静态标签，我将它们设置为相对或绝对，然后给它们 z-index；有或没有 
    !important
    标签
  3. 我设置了带有 padding-bottom 的下拉菜单，并且尝试了均匀的高度，如果幸运的是有些东西是不同的；两者都不起作用
  4. 当我将英雄部分 z-index 设置为负值时，它会消失，毫不奇怪

感谢您阅读本文并帮助我！

html css tailwind-css z-index padding
1个回答
0
投票

似乎下拉菜单is显示在英雄组件上。相反，下拉菜单似乎缺少任何背景颜色，因此英雄通过它显示。考虑在下拉列表显示时添加某种背景颜色来覆盖英雄，例如 

FlyoutLink
:

{showFlyout && (
   <motion.div
     …
     className="… bg-white"
   >


const { useState } = React;
const { AnimatePresence, motion } = Motion;
const { DownOutlined } = icons;
const { Link } = ReactRouterDOM;

const Example = () => {
    return (
        <div className="flex justify-center px-3 py-12 relative !z-50">
            <FlyoutLink href="#" FlyoutContent={ProjectTypes}>
                <Link to="/projects" className="font-semibold text-xl">Projects</Link>
                <DownOutlined className="py-auto" />
            </FlyoutLink>
        </div>
    );
};

const FlyoutLink = ({ children, href, FlyoutContent }) => {
    const [open, setOpen] = useState(true);

    const showFlyout = FlyoutContent && open;

    return (
        <div
            onMouseEnter={() => setOpen(true)}
            onMouseLeave={() => setOpen(false)}
            className="relative w-fit h-fit !z-50"
        >
            <a href={href} className="relative">
                {children}
                <span
                    style={{
                        transform: showFlyout ? "scaleX(1)" : "scaleX(0)",
                    }}
                    className="absolute -bottom-2 -left-2 -right-2 h-1 origin-left scale-x-0 rounded-full bg-indigo-300 transition-transform duration-300 ease-out"
                />
            </a>
            <AnimatePresence>
                {showFlyout && (
                    <motion.div
                        initial={{ opacity: 0, y: 15 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: 15 }}
                        transition={{ duration: 0.3, ease: "easeOut" }}
                        className="absolute left-1/2 top-12 !-translate-x-1/2 w-[calc(100vw-17px)] !z-50 bg-white"
                    >
                        <div className="absolute -top-6 left-0 right-0 h-6 bg-transparent" />
                        <div className="absolute left-1/2 top-0 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rotate-45" />
                        <FlyoutContent />
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    );
};

const ProjectTypes = () => {
    return (
        <div className="shadow-xl pb-8 relative !z-[100]">
            <div className="menu-projects-wrapper grid grid-cols-2 grid-rows-2 gap-x-4">
                <div className="subproject-container flex gap-x-2 border-b-2 border-b-black py-4">
                    <h3 className="text-black/50">/01</h3>
                    <h1 className="text-2xl font-medium">GitHub Projects</h1>
                    <div className="arrow-container flex justify-center items-center w-8 h-8">
                        <img src="https://cdn.prod.website-files.com/66bf407255e2bbac50fde356/66bf9e7b27401f68266d92b9_Arrow%20-%20Right.svg" alt="Arrow"></img>
                    </div>
                </div>
                <div className="subproject-container flex gap-x-2 border-b-2 border-b-black py-4">
                    <h3 className="text-black/50">/02</h3>
                    <h1 className="text-2xl font-medium">School Projects</h1>
                    <div className="arrow-container flex justify-center items-center w-8 h-8">
                        <img src="https://cdn.prod.website-files.com/66bf407255e2bbac50fde356/66bf9e7b27401f68266d92b9_Arrow%20-%20Right.svg" alt="Arrow"></img>
                    </div>
                </div>
                <div className="subproject-container flex gap-x-2 border-b-2 border-b-black py-4">
                    <h3 className="text-black/50">/02</h3>
                    <h1 className="text-2xl font-medium">School Projects</h1>
                    <div className="arrow-container flex justify-center items-center w-8 h-8">
                        <img src="https://cdn.prod.website-files.com/66bf407255e2bbac50fde356/66bf9e7b27401f68266d92b9_Arrow%20-%20Right.svg" alt="Arrow"></img>
                    </div>
                </div>
                <div className="subproject-container flex gap-x-2 border-b-2 border-b-black py-4">
                    <h3 className="text-black/50">/02</h3>
                    <h1 className="text-2xl font-medium">School Projects</h1>
                    <div className="arrow-container flex justify-center items-center w-8 h-8">
                        <img src="https://cdn.prod.website-files.com/66bf407255e2bbac50fde356/66bf9e7b27401f68266d92b9_Arrow%20-%20Right.svg" alt="Arrow"></img>
                    </div>
                </div>
            </div>
        </div>
    );
};

// === Hero

const { Button } = antd;

const HeroSection = () => {
    return (
        <div className="hero-container py-20 min-[480px]:pt-24 min-[480px]:pb-10 relative z-0">
            <div className="main-container px-4 md:px-6">
                <div className="title-wrap-hero flex flex-col items-center gap-y-6">
                    <hr className="w-24 h-3 m-auto bg-gradient-to-r from-white to-black rounded-e-lg" />
                    <div className="w-full max-w-[1008px]">
                        <h2 className="text-5xl font-bold text-center md:text-6xl lg:text-7xl 2xl:text-8xl">Hi! I'm Patrik Bajzík</h2>
                    </div>
                    <div className="w-full max-w-[600px]">
                        <p className="text-center font-normal lg:text-xl 2xl:text-2xl">I am a full stack programmer and software developer <br />
                            based in Trnava, Slovakia.</p>
                    </div>
                    <div className="mt-4 lg:w-60 2xl:w-72">
                        <Button
                            className="flex justify-center items-center px-6 py-2 min-w-[200px] w-full h-[52px] bg-black text-white font-medium lg:px-8 lg:py-4 lg:h-16 lg:text-xl lg:rounded-xl 2xl:px-10 2xl:py-6 2xl:h-20 2xl:rounded-2xl 2xl:text-2xl hover:!bg-black/80 hover:!text-white"
                            value="Go to Contact">
                            <Link to="/contact">Contact Me</Link>
                        </Button>
                    </div>
                </div>
            </div>
        </div >
    );
};

// === App.tsx

const { createBrowserRouter, RouterProvider } = ReactRouterDOM;

const router = createBrowserRouter([
  {
    path: "/js",
    element: (
      <React.Fragment>
        <Example/>
        <HeroSection/>
      </React.Fragment>
    ),
  },
]);

ReactDOM.createRoot(document.getElementById('app')).render(<RouterProvider router={router} />);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/@remix-run/[email protected]/dist/router.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/6.26.1/react-router.production.min.js" integrity="sha512-XVRXtK0P9IJcEljRcNRX+9hLdPMfmejyjiDlfZXR1Nyi37TT7AyZUMAMrgeX0wryYvKLdPQ9AWPGjoW/SADNxA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/6.26.1/react-router-dom.production.min.js" integrity="sha512-P87f9ArfmLsiaaMLnQV/IReuwL8OxyZsVNP6mOMvYCBMeJXj8Ln4QHXxXDb5HER0zBb6R+jam87DkVq81eNYQQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.13/dayjs.min.js" integrity="sha512-FwNWaxyfy2XlEINoSnZh1JQ5TRRtGow0D6XcmAWmYCRgvqOUTnzCxPc9uF35u5ZEpirk1uhlPVA19tflhvnW1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/5.20.3/antd.min.js" integrity="sha512-sU8OE4WdvFV5kA+AQbzA5qXq2+qLrdTFLwWknywd/zNOl3Md+KV5rLkeSlcFpAVU6Ap76rt0VipxVRbRglf/JQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/@ant-design/[email protected]/dist/index.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/framer-motion.js"></script>
<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div id="app"></div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.