DEV Community

Minoosh
Minoosh

Posted on

Today I Learned: Layouts and the Z-Index Trap in React

#webdev #react #layout #css

Sometimes, what seems “simple” in front-end development can surprise you in the best way — a little challenge, a little learning. Today, I ran into a couple of tricky issues while building my React app with a sticky Navbar and shared Layout. Here’s what happened and what I learned.

  1. Layouts make life way easier I wanted my Navbar and Footer to show up on every page without having to copy them into every component. That’s where a Layout component really saved me. 
export default function Layout({ children }) {
  return (
    <div className="font-sans">
      <Navbar />     {/* stays the same across pages */}
      {children}     {/* page-specific content */}
      <Footer />     {/* stays the same across pages */}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Then, for each page route, I just wrapped it in the Layout:

<Route path="/team" element={<Layout><Team /></Layout>} />
Enter fullscreen mode Exit fullscreen mode

✅ The best part? I don’t have to copy <Navbar /> or <Footer /> everywhere. Any update I make to them automatically shows up on all pages — clean, efficient, and it feels so good seeing it just work.

  1. The z-index surprise Even with the Layout set up, I noticed a small hiccup: my Navbar wasn’t clickable in some areas. I had this CSS: 
<section className="absolute top-0 left-0 w-full z-10">...</section>
Enter fullscreen mode Exit fullscreen mode

I thought, “z-10? That should put me on top of everything!” — not quite. But it was actually a great little puzzle.
Here’s why:
z-index only works within the same stacking context.
If a parent or sibling element has position set and a higher z-index, it can cover your Navbar, even if your Navbar has z-10.
Transparent elements can also block clicks if they’re sitting above your Navbar.
How I fixed it:
Made sure no parent element created a higher stacking context.
Bumped the Navbar z-index up:
z-[9999]
Adjusted parent elements so the stacking order made sense.
✅ After that, my Navbar links were fully clickable, and the Layout worked perfectly — such a satisfying little win!
Lessons Learned
Layout components are a total lifesaver — putting shared stuff like Navbar/Footer in one place makes your life so much easier.
z-index doesn’t automatically put you on top — understanding stacking contexts and parent/sibling elements is key.
Even invisible or transparent elements can block clicks — good reminder to always check the layering.
💡 Small CSS hiccups can be tricky, but each one is a chance to learn and improve. Today reminded me that debugging UI is just as rewarding as writing the code itself — and seeing it all work perfectly at the end is the best feeling!

Top comments (0)