3 Replies Latest reply on Jan 24, 2013 8:49 AM by Jared_DA

    Can I position an Edge stage into background using z-index(css)?

    Jared_DA Level 1

      I have an edge composition that I require to be in the background.

       

      I have tried adding a new rule to the edge div

      .edgeLoad-EDGE-57204389 { z-index:-100; }

       

      and adding this to the div that I want to be on top of the stage:

      #menu { z-index:100; }

       

      but the stage is still on top...

       

      Any Ideas?

        • 1. Re: Can I position an Edge stage into background using z-index(css)?
          pmfr01 Level 2

          Hi there.

          Why not have that composition as a div or symbol?

          • 2. Re: Can I position an Edge stage into background using z-index(css)?
            Jared_DA Level 1

            You must include the css rule into the edge stage @ compositionReady

             

             

            sym.$("#Stage").css({"z-index":"-100"});
            

             

            then just a simple css rule to my div containg my navigation bar:

             

            #menu {
                                          z-index:100;
                                          margin-bottom:-100px;
                                }
            
            

             

             

            However this prevents my stage from accepting mouse events... even when I specified width 1000px and height 20 px, to bo over the 1000px x 1000px stage.

            • 3. Re: Can I position an Edge stage into background using z-index(css)?
              Jared_DA Level 1

              I dont know how to incorporate it into edge:

               

              test this code.

               

              <style>
                      .block-menu {
                                            display: block;
                                            background: #000;
                                  }
              
              
                                  .block-menu li {
                                            display: inline-block;
                                  }
              
              
                                  .block-menu li a {
                                            color: #fff;
                                            display: block;
                                            text-decoration: none;
                                            font-family: 'Passion One',Arial,sans-serif;
                                            -webkit-font-smoothing: antialiased;
                                            -moz-font-smoothing: antialiased;
                                            font-smoothing: antialiased;
                                            text-transform: uppercase;
                                            overflow: visible;
                                            line-height: 20px;
                                            font-size: 24px;
                                            padding: 15px 10px;
                                  }
              
              
                                  /* animation domination */
                                  .three-d {
                                            -webkit-perspective: 200px;
                                            -moz-perspective: 200px;
                                            perspective: 200px;
                                            -webkit-transition: all .07s linear;
                                            -moz-transition: all .07s linear;
                                            transition: all .07s linear;
                                            position: relative;
                                  }
              
              
                                            .three-d:not(.active):hover {
                                                      cursor: pointer;
                                            }
              
              
                                            .three-d:not(.active):hover .three-d-box, 
                                            .three-d:not(.active):focus .three-d-box {
                                                      -moz-transform: translateZ(-25px) rotateX(90deg);
                                                      -webkit-transform: translateZ(-25px) rotateX(90deg);
                                                      -o-transform: translateZ(-25px) rotateX(90deg);
                                                      transform: translateZ(-25px) rotateX(90deg);
                                            }
              
              
                                  .three-d-box {
                                            -webkit-transition: all .3s ease-out;
                                            -moz-transition: all .3s ease-out;
                                            -ms-transition: all .3s ease-out;
                                            -o-transition: all .3s ease-out;
                                            transition: all .3s ease-out;
                                            -webkit-transform: translatez(-25px);
                                            -moz-transform: translatez(-25px);
                                            -o-transform: translatez(-25px);
                                            transform: translatez(-25px);
                                            -webkit-transform-style: preserve-3d;
                                            -moz-transform-style: preserve-3d;
                                            -ms-transform-style: preserve-3d;
                                            -o-transform-style: preserve-3d;
                                            transform-style: preserve-3d;
                                            pointer-events: none;
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            display: block;
                                            width: 100%;
                                            height: 100%;
                                  }
              
              
                                  .front {
                                            -webkit-transform: rotatex(0deg) translatez(25px);
                                            -moz-transform: rotatex(0deg) translatez(25px);
                                            -o-transform: rotatex(0deg) translatez(25px);
                                            transform: rotatex(0deg) translatez(25px);
                                  }
              
              
                                  .back {
                                            -webkit-transform: rotatex(-90deg) translatez(25px);
                                            -moz-transform: rotatex(-90deg) translatez(25px);
                                            -o-transform: rotatex(-90deg) translatez(25px);
                                            transform: rotatex(-90deg) translatez(25px);
                                            color: #FFE7C4;
                                  }
              
              
                                  .front, .back {
                                            display: block;
                                            width: 100%;
                                            height: 100%;
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            background: black;
                                            padding: 15px 10px;
                                            color: white;
                                            pointer-events: none;
                                            -moz-box-sizing: border-box;
                                            box-sizing: border-box;
                                  }
              
              
                            #menu {
                                            z-index:100;
                                            margin-bottom:-100px;
                                  }
                                  }
                  </style>
              
              
              <div id="menu"><ul class="block-menu">
                                  <li><a href="javascript: goHome();" class="three-d">
                                            Dynamic
                                            <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                                  </a></li>
                                  <li><a href="/demos" class="three-d">
                                            Work
                                            <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                                  </a></li>
                                  <li><a href="/deals" class="three-d">
                                            Blog
                                            <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                                  </a></li>
                                  <li><a href="/about" class="three-d">
                                            Profile
                                            <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                                  </a></li>
                      <li><a href="/about" class="three-d">
                                            Contact
                                            <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                                  </a></li>
                        </ul>
              <span class="block-menu"></span></div>
              
              

               

               

              I did figure out the answer to my question though.