title: How do I keep animations in the background, behind another element?
body: <p>I am trying to create a button using HTML/jQuery that is positioned on the middle left of the screen and hovers over everything else that is displayed.  I have a html5 transition animation that moves an element on the screen.  The animation appears on top of the button, which is what I don't want.  I've tried setting the z-order with absolute positioning but the animation still appears over the button.</p>
  
  <p>How can I place a button to an absolution position on the screen and have all animations appear under it?</p>
  
  <p>Here is some code that demonstrates the problem:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;        
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"&gt;&lt;/script&gt;                
      &lt;style&gt;
          pre {
              margin-top:0px;
              margin-bottom:0px;          
          }
  
          .button {
             border-top: 1px solid #96d1f8;
             background: #65a9d7;
             background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
             background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
             background: -moz-linear-gradient(top, #3e779d, #65a9d7);
             background: -ms-linear-gradient(top, #3e779d, #65a9d7);
             background: -o-linear-gradient(top, #3e779d, #65a9d7);
             padding: 5.5px 11px;
             -webkit-border-radius: 40px;
             -moz-border-radius: 40px;
             border-radius: 40px;
             -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
             -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
             box-shadow: rgba(0,0,0,1) 0 1px 0;
             text-shadow: rgba(0,0,0,.4) 0 1px 0;
             color: white;
             font-size: 24px;
             font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
             text-decoration: none;
             vertical-align: middle;
             }
          .button:hover {
             border-top-color: #28597a;
             background: #28597a;
             color: #ccc;
             }
          .button:active {
             border-top-color: #1b435e;
             background: #1b435e;
             }        
  
          .container {
              position:relative;
              left:0px;
              display: inline-block;
              padding: 15px;
              background-color: #d8e8f8;
              opacity: 100;
              -webkit-transition:all 1.0s ease-in-out;
              -moz-transition:all 1.0s ease-in-out;
              -o-transition:all 1.0s ease-in-out;
              -ms-transition:all 1.0s ease-in-out;        
              transition:all 1.0s ease-in-out;
          }
      &lt;/style&gt;                
  &lt;/head&gt;
  &lt;script&gt;
      $(document).ready(function() {
  
            function moveSlideLeft(id) {
  
              var percentage = "translate(-100%, 0px)";
              $(id).css("-webkit-transform",percentage);
              $(id).css("-moz-transform",percentage);
              $(id).css("-o-transform",percentage);
              $(id).css("-ms-transform",percentage);          
              $(id).css("transform",percentage);          
            }       
  
  
          $("#slide1").click(function() {
              moveSlideLeft("#container1");
          });
      }); 
  &lt;/script&gt;   
  &lt;body&gt;      
  
  &lt;div class="button" style="float: left"&gt;The button&lt;/div&gt;
  
  &lt;div id="container1" class="container"&gt;
  &lt;div id="slide1"&gt;
  
  &lt;pre&gt;
  Stuff.......................................
  Stuff.......................................
  Stuff.......................................
  &lt;/pre&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>