Fix z-index issue in the menu of MODX 3.x. #16778
Conversation
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.
Mark-H
changed the title
Jako
changed the title
Jako
changed the title
There was a problem hiding this comment.
For others who review this, you likely won't see a difference unless you have a specific scenario where visibility issues are caused by the previous z-index values (or lack thereof in the case of the #modx-content element). In my dev setup I don't see a difference before and after these changes, but those changes may be useful for preventing future issues.
SIde note: It occurs to me that maybe we should establish a range of z-indexes that core MODX uses, say 0-100 and maybe one high one meant to “override” all page elements, including anything generated by an Extra (maybe 999 for system modals and such). There's no reason to have ridiculously-high z-indexes if there's a rule for how we use them. Then it would be up to Extra devs to adhere to these ranges, using 101-998 for placing their elements above the core layout or below that range to weave something between core elements (unlikely to be done, but possible). Anyway, just an idea for future consideration ;-)
smg6511
added
requires build
2 participants
What does it do?
Add a z-index: 0 to #modx-content and remove some not needed z-index in the navbar.
Why is it needed?
Fix the z-index issue in the menu of 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 of the menu are hidden with opacity: 0. This will put these elements into its own, new stacking context, which does not play well with #modx-content items having a z-index. This will be fine when #modx-content has a z-index: 0.
Hopefully this will solve other z-index issues too.
How to test
Compile the CSS and check some pages with tabs etc and custom manager pages like Agenda.
Related issue(s)/PR(s)
#16711 and others
#16690 and #16712 can be maybe reverted.