Troubleshooting: Changing z-index of different modules

[schlachtkreuzer6]

Hi! I got some troubles with my custom.css that the z-index does not work . So my problem is, that the MMM-Globe (.region.top.center) overlaps the text of my calendar module (or anything else depending where i set the globe). So i tried some things (https://forum.magicmirror.builders/topic/1393/layer-definition-here-mmm-globe-overlaps-left-panel/22)

Here is my custom.css:

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT.     *
 *****************************************************/

body {
  margin: 20px;
  position: absolute;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  background: #000;
  color: #aaa;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}

.region.top.center {
z-index: -2;
position: absolute;
}

.brightb {
color: #55acee;
}
.currentweather .wi-sunrise {
color: #ffd700;
}
.currentweather .wi-sunset {
color: #ffa500;
}
.currentweather .wi-day-sunny {
color: #ffff00;
}
.currentweather .wi-night-showers {
color: #55acee;
}
.currentweather .wi-degrees {
color: #415;
}
.currentweather .wi-rain {
color: #55acee;
}
.currentweather .wi-showers {
color: #55acee;
}
.currentweather .wi-night-showers {
color: #55acee;
}
.currentweather .wi-night-alt-cloudy-windy {
color: #aaa;
}
.currentweather .wi-night-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy {
color: #aaa;
}
.currentweather .wi-day-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy-windy {
color: #aaa;
}
.currentweather .wi-showers {
color: #55acee;
}
.currentweather .wi-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-snow {
color: #fff;
}
.currentweather .wi-fog {
color: #999;
}
.currentweather .wi-night-clear {
color: #fff;
}
.currentweather .wi-night-rain {
color: #55acee;
}
.currentweather .wi-night-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-night-snow {
color: #fff;
}
.weatherforecast .wi-sunrise {
color: #ffd700;
}
.weatherforecast .wi-sunset {
color: #ffa500;
}
.weatherforecast .wi-day-sunny {
color: #ffff00;
}
.weatherforecast .wi-night-showers {
color: #55acee;
}
.weatherforecast .wi-degrees {
color: #415;
}
.weatherforecast .wi-rain {
color: #55acee;
}
.weatherforecast .wi-showers {
color: #55acee;
}
.weatherforecast .wi-night-showers {
color: #55acee;
}
.weatherforecast .wi-night-alt-cloudy-windy {
color: #aaa;
}
.weatherforecast .wi-night-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy {
color: #aaa;
}
.weatherforecast .wi-day-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy-windy {
color: #aaa;
}
.weatherforecast .wi-showers {
color: #55acee;
}
.weatherforecast .wi-thunderstorm {
color: #ff00ff;
}
.weatherforecast .wi-snow {
color: #fff;
}
.weatherforecast .wi-fog {
color: #999;
}
.weatherforecast .wi-night-clear {
color: #fff;
}
.weatherforecast .wi-night-rain {
color: #55acee;
}
.weatherforecast .wi-night-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-night-snow {
color: #fff;
}

.region.fullscreen {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
}

[strawberry 3.141]

@schlachtkreuzer6 did you try to raise the z-index of your calendar module?

[schlachtkreuzer6]

@strawberry-3.141 Ah if I don´t mix left over right than every thing works (I think I should drink more coffee or go to bed earlier^^) . But I don´t understand why z-index in top center does not work for me… anyway many many many many maaaany thanks strawberry :D

.region.left {
z-index: 2;
position: absolute;
}

[j.e.f.f]

@schlachtkreuzer6 z-index is a real pain in the butt to work with sometimes… The value you set affects the element’s position within the applicable stacking context. If each region (top_right, lower_third, etc.) have their own stacking contexts, then you’ll need to set the z-index of the regions themselves, not the modules within. Also, z-index does not take negative values, only positive. So in order to position element B below element A, set z-index values for both elements, making sure than A’s value is higher than B’s.

Finally, the draw order affects default stacking. the last element to be written to the screen by default has the highest z-index within its stacking context. So you may be able to influence the order in which items are drawn to the screen by changing the order you configure the modules in your config.js file. (i.e., try configuring MMM-Globe first in your config). However I don’t know enough about how MM works to state with certainty that this is true.

Finally, there is a region named “fullscreen_below” that is positioned under all other elements. It is used for things like the animated snow background module. You might be able to assign your MMM-Globe module to this region, then use some CSS to size and position it as desired. This will guarantee that any other module will be above the globe.

For more info on z-index and stacking contexts, read this:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

My recomenrdation to this is try as much as possible to avoid overlapping elements. Resizing modules is often much easier than trying to work with z-index.

[schlachtkreuzer6]

@j.e.f.f ah thanks! Okay, yeah finally the entry above works fine, in my setup there isn’t much space to play with the sizes (portrait)… But anyway thanks for your time to explain some things about css, that’s great! :)