FIxed Z-Index issue in Merch Popup

Sahan-Daksh · Aug 11, 2024 · 2e6141b · 2e6141b
1 parent a965558
commit 2e6141b
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
@@ -46,11 +46,11 @@ export default function MainPage() {
         </AnimatedBackground>
       </div>
 
-      <AnimatedBackground isActive={activeSegment === 2}>
+      <AnimatedBackground isActive={activeSegment === 2} style={{ zIndex: -1 }}>
         <Partners />
       </AnimatedBackground>
 
-      <AnimatedBackground isActive={activeSegment === 3}>
+      <AnimatedBackground isActive={activeSegment === 3} style={{ zIndex: -1 }}>
         <Contact />
       </AnimatedBackground>
 

diff --git a/src/utils/AnimatedBackground.jsx b/src/utils/AnimatedBackground.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import "../assets/styles/utils/AnimatedBackground.css";
 
-const AnimatedBackground = ({ children, isActive }) => {
+const AnimatedBackground = ({ children, isActive, style }) => {
   const [animationClass, setAnimationClass] = useState("");
 
   useEffect(() => {
@@ -16,6 +16,7 @@ const AnimatedBackground = ({ children, isActive }) => {
   return (
     <motion.div
       className={`animated-background-container ${animationClass}`}
+      style={style}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -78,6 +78,8 @@ export default {
         3: "3",
         4: "4",
         5: "5",
+        'custom-z': '100000',
+        'low-z':'1000'
       },
       borderWidth: {
         DEFAULT: "0.0625rem",