• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

CSS "z-index" is not working anymore

Scheduled Pinned Locked Moved Troubleshooting
11 Posts 3 Posters 7.9k Views 2 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • I Offline
    iMAGiC @davidnesbitt7
    last edited by Apr 16, 2017, 7:34 PM

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

    Choice * Judgment * Values

    1 Reply Last reply Reply Quote 0
    • I Offline
      iMAGiC @davidnesbitt7
      last edited by Apr 16, 2017, 7:50 PM

      @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:

      Choice * Judgment * Values

      B 1 Reply Last reply Apr 16, 2017, 7:58 PM Reply Quote 0
      • B Offline
        broberg Project Sponsor @iMAGiC
        last edited by broberg Apr 16, 2017, 8:00 PM Apr 16, 2017, 7:58 PM

        @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

        I 2 Replies Last reply Apr 16, 2017, 8:05 PM Reply Quote 0
        • I Offline
          iMAGiC @broberg
          last edited by Apr 16, 2017, 8:05 PM

          @broberg Yes, I will modify it later.

          Choice * Judgment * Values

          1 Reply Last reply Reply Quote 0
          • I Offline
            iMAGiC @broberg
            last edited by Apr 16, 2017, 9:17 PM

            @broberg all set, thank you~

            in custom.css

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

            Choice * Judgment * Values

            1 Reply Last reply Reply Quote 0
            • 1
            • 2
            • 2 / 2
            2 / 2
            • First post
              11/11
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy