From 4f29a84f59e11c70cbfaa1e3ba0d183634fa71a7 Mon Sep 17 00:00:00 2001 From: "Janie.V" Date: Thu, 4 Jun 2026 17:32:04 +0530 Subject: [PATCH] Fix: Add proper z-index layer priority context for dropdown nav elements --- .../examples/nav-clipping-fix/README.md | 10 +++ .../examples/nav-clipping-fix/demo.html | 25 +++++++ .../examples/nav-clipping-fix/style.css | 70 +++++++++++++++++++ 3 files changed, 105 insertions(+) create mode 100644 submissions/examples/nav-clipping-fix/README.md create mode 100644 submissions/examples/nav-clipping-fix/demo.html create mode 100644 submissions/examples/nav-clipping-fix/style.css diff --git a/submissions/examples/nav-clipping-fix/README.md b/submissions/examples/nav-clipping-fix/README.md new file mode 100644 index 0000000..085653a --- /dev/null +++ b/submissions/examples/nav-clipping-fix/README.md @@ -0,0 +1,10 @@ +# Animated Navigation Dropdown Clipping Fix + +Resolves a layout stacking error where expanding mobile navigation slide windows drop underneath subsequent block layers. + +## Resolution +- Enforced an explicit stacking layer priority threshold (`z-index: 1000`) on the navigation container parent wrapper. +- Isolated container layers to ensure drop components overlap surrounding document fragments predictably. + +## Linked Issue +Closes #1239 diff --git a/submissions/examples/nav-clipping-fix/demo.html b/submissions/examples/nav-clipping-fix/demo.html new file mode 100644 index 0000000..3220864 --- /dev/null +++ b/submissions/examples/nav-clipping-fix/demo.html @@ -0,0 +1,25 @@ + + + + + + Nav Menu Clipping Fix Demo - #1239 + + + + + + +
+

Main Application Hero Window
The dropdown overlay above should stack cleanly over this area without getting cut off.

+
+ + + diff --git a/submissions/examples/nav-clipping-fix/style.css b/submissions/examples/nav-clipping-fix/style.css new file mode 100644 index 0000000..ca21852 --- /dev/null +++ b/submissions/examples/nav-clipping-fix/style.css @@ -0,0 +1,70 @@ +/* Global Styles */ +body { + margin: 0; + padding: 0; + background-color: #0b0f19; + font-family: system-ui, -apple-system, sans-serif; + color: #f1f5f9; +} + +/* Fixed Navigation Container */ +.ease-nav-menu { + position: relative; + background: #111827; + height: 60px; + display: flex; + align-items: center; + padding: 0 20px; + border-bottom: 1px solid #1f2937; + /* CRITICAL FIX: Establish high stacking context priority */ + z-index: 1000; +} + +.ease-nav-title { + color: #38bdf8; + margin: 0; + font-size: 1.2rem; +} + +/* Animated Menu Content Window */ +.ease-dropdown-animated { + position: absolute; + top: 60px; + left: 0; + width: 100%; + background: #1f2937; + box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5); + border-bottom: 2px solid #38bdf8; + padding: 15px 20px; + box-sizing: border-box; +} + +.ease-dropdown-animated a { + display: block; + color: #9ca3af; + text-decoration: none; + padding: 10px 0; + font-size: 1rem; + transition: color 0.2s ease; +} + +.ease-dropdown-animated a:hover { + color: #38bdf8; +} + +/* Underlying Page Element (The Broken Component) */ +.hero-section { + position: relative; + background: linear-gradient(135deg, #1e1b4b, #0f172a); + height: 250px; + display: flex; + align-items: center; + justify-content: center; + /* Keeps layout stacked beneath z-index: 1000 */ + z-index: 1; +} + +.hero-section h2 { + font-size: 1.8rem; + text-align: center; +}