zIndex config option is not applied — containers always render at z-index: 9999
Description
The README documents a zIndex field per module entry (and references it in the Troubleshooting section: “Adjust zIndex in your module config”), but setting it has no effect. Positioned containers are always rendered with z-index: 9999 regardless of the configured value.
Steps to reproduce
- Configure a module with an explicit
zIndex:{ module: "MMM-GlobalPositioner", config: { debug: false, delay: 1000, maxAttempts: 5, modules: [ { name: "MMM-GoogleSheets", position: { top: 160, left: 20 }, zIndex: 1 } ] } } - Restart MagicMirror.
- Inspect the generated container in DevTools.
Expected behavior
The container’s inline style should reflect z-index: 1.
Actual behavior
The container is still rendered with z-index: 9999, e.g.:
<div id="mm-global-container-MMM-GoogleSheets"
style="position: fixed; z-index: 9999; pointer-events: none; left: 20px; top: 160px;">
Impact
This makes it impossible to layer GlobalPositioner-managed modules underneath other overlay-based modules — for example, screen-dimming modules like MMM-AutoDimmer/MMM-Dimmer, which apply opacity via a fullscreen_above overlay. Because GlobalPositioner’s containers are hardcoded to z-index: 9999, modules repositioned by it always render above such overlays and never get dimmed, even though dimming works correctly for all normally-positioned modules.
Workaround
Forcing the z-index via a custom stylesheet (config/custom.css) with !important, since the module sets it as an inline style:
div[id^="mm-global-container-"] {
z-index: 1 !important;
}
This resolves the visual conflict, but it would be better if the documented zIndex config option actually worked, so this kind of override isn’t necessary.
Environment
- MagicMirror²: v2.36.0 (commit
fb41d24ef522e91e802e2a623ff6afbddeb3c9d8) - Node.js: v22.21.1
- OS: Raspberry Pi OS
Otherwise, GREAT module!
Karl