我有一个横幅作为.png，我希望它在点击后从标题后面下降。这就是我尝试过的，但在这种情况下，div会回到原来的位置。我希望它在标题后面（隐藏）和过渡后，保持其位置：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s;
-webkit-animation:myfirst 5s linear 2s;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
100% {background:green; left:0px; top:200px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
100% {background:green; left:0px; top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
我也尝试过使用jQuery的slideDown（）但遗憾的是因为它是一个图像看起来不够好。
谢谢！
答案 0 :(得分：1)
您可以使用 z-index属性
@keyframes myfirst{ position:absolute; z-index:-1; }
使用z-index：1来显示
检查CSS z-index属性
答案 1 :(得分：1)
这是一个jQuery解决方案，也许有人可以想出一个更优雅的解决方案，但试一试。我希望这是你所追求的行为。
jsFiddle：http://jsfiddle.net/fabio_silva/Qhrnd/
的 HTML 的
<div id="header">header</div>
<div id="banner">banner</div>
的 CSS 的
div#header
{
background: #abc;
width: 500px;
height: 100px;
position: relative;
z-index: 1;
}
div#banner
{
width: 500px;
height: 100px;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background: url('http://jsfiddle.net/img/logo.png') no-repeat 50% 50%;
background-color: #345;
}
的使用Javascript / jQuery的 的
var hidden = true;
$(document).ready(function () {
$("#header").click(function () {
if (hidden)
{
$("#banner").animate({
top: '+=100',
display: 'block' //updated
}, 500);
hidden=false;
}
else
{
$("#banner").animate({
top: '-=100'
display: 'none' //updated
}, 500);
hidden=true;
}
});
});