CSS "z-index" is not working anymore

davidnesbitt7

@iMAGiC Oh…I’m not familiar with that module, I can see that you have position: 'fullscreen_above'; maybe try position: 'fullscreen_below' and see if that changes it to be below for you?

iMAGiC

@davidnesbitt7 I’ve tried that, but not succeed… :disappointed:
thanks for your time, I will try others later…

iMAGiC

@davidnesbitt7 finally I got some thing, I was add z-index in wrong place.

I am now add z-index in MMM-RandomPhoto.js:

img id="mmm-photos-placeholder1" style="z-index=-1;opacity: 0; position: absolute" img id="mmm-photos-placeholder2" style="z-index=-1;opacity: 0; position: absolute"

and remark background in main.css:

 // background: #000;

now it works, only issue is picture not shows from top, but it’s minor, when display behind mirror. :grin:

broberg

@iMAGiC you shouldn’t edit the module code or the main.css file.

You should do all css alterations in the custom.css file

like background: none in the body{} tag and add

#mmm-photos-placeholder1 {position: absolute; z-index: -1; opacity: 0}
#mmm-photos-placeholder2 {position: absolute; z-index: -1; opacity: 0}

to your custom.css

iMAGiC

@broberg Yes, I will modify it later.

iMAGiC

@broberg all set, thank you~

in custom.css

html {
  cursor: none;
  overflow: hidden;
  background: transparent;
	}
 .region.fullscreen * {
  pointer-events: auto;
  position: top;
  top: 0px;
	}