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

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> ); } 

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

<Route path="/team" element={<Layout><Team /></Layout>} /> 

✅ 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.

2.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> 

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!