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 8.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.
    • iMAGiCI Offline
      iMAGiC @davidnesbitt7
      last edited by

      @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
      • iMAGiCI Offline
        iMAGiC @davidnesbitt7
        last edited by

        @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

        brobergB 1 Reply Last reply Reply Quote 0
        • brobergB Offline
          broberg Project Sponsor @iMAGiC
          last edited by 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

          iMAGiCI 2 Replies Last reply Reply Quote 0
          • iMAGiCI Offline
            iMAGiC @broberg
            last edited by

            @broberg Yes, I will modify it later.

            Choice * Judgment * Values

            1 Reply Last reply Reply Quote 0
            • iMAGiCI Offline
              iMAGiC @broberg
              last edited by

              @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
              • First post
                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