如何在背景中保留动画，在另一个元素后面

How do I keep animations in the background, behind another element?

本文关键字：另一个 元素 保留 背景 动画      更新时间：2023-09-26

我正在尝试使用HTML/jQuery创建一个按钮，该按钮位于屏幕的左中，并在显示的所有其他内容上悬停。我有一个html5过渡动画，移动屏幕上的元素。动画出现在按钮的顶部，这是我不想要的。我试过用绝对定位设置z轴顺序，但动画仍然出现在按钮上方。

我怎么能把一个按钮在屏幕上的绝对位置，并有所有的动画显示在它下面?

下面的代码演示了这个问题:

<!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>

因为.container上有position: relative;，所以按钮上需要position: relative;和z-index:

position: relative;
z-index: 10;

http://jsfiddle.net/HerrSerker/wppFq/2/您需要为slide1和按钮

设置位置和z-index
相关文章：