title: Image overlapping navbar on Next.js with Tailwind
body: <p>I have this problem where an image from a section overlaps when the Navbar dropdown in mobile is open. I've tried adding z-50 to the navbar but it wont make any difference.</p>
  <p>What I'd like to happen is that when you open the dropdown menu from the navbar the image stays below</p>
  <p><a href="https://i.stack.imgur.com/TEpit.png" rel="nofollow noreferrer">The image belongs with the orange background, below the black navbar</a></p>
  <p>This is the code for the navbar:</p>
  <pre><code>import React from &quot;react&quot;;
  import Link from &quot;next/link&quot;;
  import { useState } from &quot;react&quot;;
  
  function MobileNav({ open, setOpen }: any) {
    return (
      &lt;div
        className={`absolute z-50 top-0 h-fit pb-5 left-0 w-screen bg-black transform ${
          open ? &quot;-translate-y-0&quot; : &quot;-translate-y-full&quot;
        } transition-transform duration-300 ease-in-out filter drop-shadow-md`}
      &gt;
        &lt;div className=&quot;text-white font-vietnam text-2xl bg-growing-underline flex items-center justify-center filter drop-shadow-md h-20&quot;&gt;
          &lt;Link href=&quot;/&quot;&gt;
            &lt;a&gt;MENU&lt;/a&gt;
          &lt;/Link&gt;
        &lt;/div&gt;
        &lt;div className=&quot;flex flex-col bg-black gap-7 pl-4&quot;&gt;
          &lt;Link href=&quot;/about&quot;&gt;
            &lt;a
              className=&quot; text-white text-lg&quot;
              onClick={() =&gt;
                setTimeout(() =&gt; {
                  setOpen(!open);
                }, 100)
              }
            &gt;
              About
            &lt;/a&gt;
          &lt;/Link&gt;
          &lt;Link href=&quot;/projects&quot;&gt;
            &lt;a
              className=&quot; text-white text-lg&quot;
              onClick={() =&gt;
                setTimeout(() =&gt; {
                  setOpen(!open);
                }, 100)
              }
            &gt;
              Projects
            &lt;/a&gt;
          &lt;/Link&gt;
          &lt;Link href=&quot;/resume&quot;&gt;
            &lt;a
              className=&quot; text-white text-lg pb-3&quot;
              onClick={() =&gt;
                setTimeout(() =&gt; {
                  setOpen(!open);
                }, 100)
              }
            &gt;
              CV
            &lt;/a&gt;
          &lt;/Link&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default function Navbar() {
    const [open, setOpen] = useState(false);
    return (
      &lt;nav className=&quot;flex  align-middle filter drop-shadow-md bg-black items-center justify-between h-16 px-5 sm:px-10&quot;&gt;
        &lt;MobileNav open={open} setOpen={setOpen} /&gt;
        &lt;div&gt;
          &lt;Link href=&quot;/&quot;&gt;
            &lt;a className=&quot;text-white font-vietnam text-xl sm:text-3xl whitespace-nowrap inline-block bg-gradient-to-r hover:-translate-y-1.5 from-yellow-50 to-yellow-100 bg-growing-underline hover:text-black&quot;&gt;
              ADRIAN ARANDA
            &lt;/a&gt;
          &lt;/Link&gt;
        &lt;/div&gt;
        &lt;div className=&quot;flex justify-end items-center&quot;&gt;
          &lt;div
            className=&quot;z-50 flex relative w-7 h-7 flex-col justify-between items-center md:hidden&quot;
            onClick={() =&gt; {
              setOpen(!open);
            }}
          &gt;
            {/* hamburger button */}
            &lt;span className={`h-1 w-full bg-white rounded-lg transform transition duration-300 ease-in-out ${open ? &quot;rotate-45 translate-y-3&quot; : &quot;&quot;}`} /&gt;
            &lt;span className={`h-1 w-full bg-white rounded-lg transition-all duration-300 ease-in-out ${open ? &quot;w-0&quot; : &quot;w-full&quot;}`} /&gt;
            &lt;span className={`h-1 w-full bg-white rounded-lg transform transition duration-300 ease-in-out ${open ? &quot;-rotate-45 -translate-y-3&quot; : &quot;&quot;}`} /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;gap-10 hidden md:flex&quot;&gt;
            &lt;Link href=&quot;/about&quot;&gt;
              &lt;a className=&quot;text-white whitespace-nowrap transition ease-in-out hover:-translate-y-1 active:scale-110 active:text-zinc-900 active:skew-y-6 duration-400&quot;&gt;
                About Me
              &lt;/a&gt;
            &lt;/Link&gt;
            &lt;Link href=&quot;/projects&quot;&gt;
              &lt;a className=&quot;text-white whitespace-nowrap transition ease-in-out hover:-translate-y-1 active:scale-110 active:text-zinc-900 active:skew-y-6 duration-400&quot;&gt;
                Projects
              &lt;/a&gt;
            &lt;/Link&gt;
            &lt;Link href=&quot;/resume&quot;&gt;
              &lt;a className=&quot;text-white whitespace-nowrap transition ease-in-out hover:-translate-y-1 active:scale-110 active:text-zinc-900 active:skew-y-6 duration-400&quot;&gt;
                CV
              &lt;/a&gt;
            &lt;/Link&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    );
  }
  
  </code></pre>
  <p>And this is my section:</p>
  <pre><code>import React from &quot;react&quot;;
  import type { NextPage } from &quot;next&quot;;
  import Navbar from &quot;../components/Navbar&quot;;
  import Head from &quot;next/head&quot;;
  import Image from &quot;next/image&quot;;
  import adrian2 from &quot;../public/adrian3.png&quot;;
  
  const about: NextPage = () =&gt; {
    return (
      &lt;&gt;
        &lt;Head&gt;
          &lt;title&gt;Adrián Aranda / About&lt;/title&gt;
          &lt;meta name=&quot;description&quot; content=&quot;Generated by create next app&quot; key=&quot;Adrian&quot; /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
        &lt;Navbar&gt;&lt;/Navbar&gt;
        &lt;div className=&quot;p-4 sm:pt-[3vh] projects&quot;&gt;
          &lt;div className=&quot;flex-col sm:flex sm:flex-row px-3 sm:px-24 justify-center items-center align-middle&quot;&gt;
            &lt;div className=&quot;p-2 sm:hidden&quot;&gt;
              &lt;Image alt=&quot;adrian aranda&quot; src={adrian2} className=&quot;rounded-3xl&quot; /&gt;
            &lt;/div&gt;
            &lt;div className=&quot; w-4/12 hidden m-auto sm:px-5 sm:block relative aspect-square&quot;&gt;
              &lt;Image alt=&quot;adrian aranda&quot; src={adrian2} layout=&quot;fill&quot; objectFit=&quot;cover&quot; className=&quot; rounded-3xl overflow-clipped&quot; /&gt;
            &lt;/div&gt;
  
            &lt;div className=&quot;flex-column  sm:w-6/12 sm:px-4 sm:pr-4 m-auto &quot;&gt;
              &lt;h3 className=&quot;text-white text-[3em] sm:text-[3.5em] transition ease-in-out duration-1000 hover:text-red-400 w-auto inline-block bg-gradient-to-r hover:-translate-y-1&quot;&gt;
                &lt;strong&gt;Hello there!&lt;/strong&gt;
              &lt;/h3&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default about;
  
  </code></pre>