2
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>
私は全くmiそれは駄目だ！ Thanx N Rohler！ – TERACytE