백그라운드에서 다른 요소 뒤에 애니메이션을 유지하려면 어떻게해야합니까?

HTML/jQuery를 사용하여 화면의 왼쪽 가운데에 위치하며 표시되는 모든 항목 위에 마우스를 놓고 버튼을 만들려고합니다. html5 전환 애니메이션을 화면에 요소를 이동합니다. 버튼의 맨 위에 애니메이션이 나타납니다. 이는 내가 원하지 않는 것입니다. 절대 위치 지정을 사용하여 z 순서를 설정하려고 시도했지만 애니메이션이 여전히 버튼 위에 나타납니다.백그라운드에서 다른 요소 뒤에 애니메이션을 유지하려면 어떻게해야합니까?

버튼을 화면의 절대 위치에 배치하고 그 아래에 모든 애니메이션을 표시하려면 어떻게해야합니까? 당신이 .container에 position: relative;을 가지고 있기 때문에

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" />   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>     
    <style> 
     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; 
     } 
    </style>     
</head> 
<script> 
    $(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"); 
     }); 
    }); 
</script> 
<body>  

<div class="button" style="float: left">The button</div> 

<div id="container1" class="container"> 
<div id="slide1"> 

<pre> 
Stuff....................................... 
Stuff....................................... 
Stuff....................................... 
</pre> 

</div> 
</div> 
</body> 
</html>

출처

2011-10-15 TERACytE