From 46544c6c661e7a15fe648dfc9ce78a6b5f4db077 Mon Sep 17 00:00:00 2001
From: Thomas Jakobi <thomas.jakobi@partout.info>
Date: Mon, 29 Sep 2025 21:59:11 +0200
Subject: [PATCH 1/2] Fix the annoying z-index issue in MODX 3.x

The reason for this issue can be found in https://coder-coder.com/z-index-isnt-working/#3-youre-setting-opacity-transform-or-other-css-properties-that-put-the-element-in-a-new-stacking-context

The flyouts are hidden with opacity: 0. This will put these elements into its own, new stacking context and the stacking context if the #modx-content will be fine with a z-index: 0.

Hopefully this will solve other z-index issues too.

modx-header .modx-subnav, #modx-footer .modx-subnav { z-index: 99999999999 } can be removed this way.
---
 _build/templates/default/sass/index.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_build/templates/default/sass/index.scss b/_build/templates/default/sass/index.scss
index 67a987c5d6..3bc334fc8e 100644
--- a/_build/templates/default/sass/index.scss
+++ b/_build/templates/default/sass/index.scss
@@ -198,6 +198,7 @@ textarea.x-form-field {
   width: calc(100% - 370px);
   right: 0;
   left: 370px; /* give #modx-content an initial left value to prevent the panel from jumping around */
+  z-index: 0;
 }
 
 .modx-form p {

From dcd9a2858f8edbf0f6135eec245e6d2d7f3a60f5 Mon Sep 17 00:00:00 2001
From: Thomas Jakobi <thomas.jakobi@partout.info>
Date: Mon, 29 Sep 2025 22:18:33 +0200
Subject: [PATCH 2/2] Remove some not needed z-index rules

---
 _build/templates/default/sass/_navbar.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/_build/templates/default/sass/_navbar.scss b/_build/templates/default/sass/_navbar.scss
index 17d705a898..6d5b399eaf 100644
--- a/_build/templates/default/sass/_navbar.scss
+++ b/_build/templates/default/sass/_navbar.scss
@@ -35,7 +35,6 @@
   font-weight: bold;
   font: $fontNavbar;
   height: 100%;
-  z-index: 20;
   display: flex;
   flex-direction: column;
   padding: 0 5px;
@@ -195,7 +194,6 @@
     box-sizing: border-box;
     list-style: none;
     position: absolute;
-    z-index: 99999999999;
     opacity: 0;
     visibility: hidden;
     transition: all .15s ease;
@@ -291,7 +289,6 @@
       background: $white;
       list-style: none;
       position: absolute;
-      z-index: 24;
       &-arrow {
         border: 8px solid transparent;
         border-right-color: #FFF;
@@ -301,7 +298,6 @@
         right: 0;
         top: 50%;
         transform: translate(0, -50%);
-        z-index: 10010;
         display: none;
       }
       &.active {