Question

我正在尝试使用位于屏幕中间左侧的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>

Answer 1

由于position: relative;上有.container，因此按钮上需要position: relative;和z-index：

position: relative;
z-index: 10;

Answer 2

http://jsfiddle.net/HerrSerker/wppFq/2/ 你需要为slide1和button

提供位置和z-index

如何在后台保留动画，在另一个元素后面？

2 个答案: