I have a problem with z-index. I have a navigation bar and when I hover over a text, a dropdown menu appears. Menu and everything works as expected. The problem is when the menu is created, it won't go "above" the hero section elements. You can see both rendered; dropdown menu AND the heroes section and the elements in it. Here is the code snippets for both navbar element and hero section respectively:
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;
Of course, these elements are going in App.tsx right after like this:
<>
<Navbar />
<HeroSection />
</>
I tried several things, but this is what doesn't work at all:
- z-indexing every div tag and even giving them
!importanttag - for those tags, that were static, I set them to relative or absolute and then give them z-index; both with and without
!importanttag - I set dropdown menu with padding-bottom and I tried even height, if luckily something was different; both don't work
- when I set hero section z-index to minus values, it will dissepear, unsurprisingly
Thanks for reading this far and helping me out!
