如何将图像放在另一个图像后面，然后向上滑动？答案

【问题标题】：How do I place an image behind another, and then slide it up?如何将图像放在另一个图像后面，然后向上滑动？
【发布时间】：2013-01-24 04:18:07
【问题描述】：

我目前有两个图像“图像 A”和“图像 B”。截至目前，我的意图是淡入图像 A，然后淡入其后面的图像 B（同时保持在页面的中心）。然而，相反，图像 B 似乎正在推高图像 A。我正在使用 z-index，但我可能做错了，因为它不是很有效。

在 IMAGE B 中淡入后，正确地我也想将它滑到 IMAGE A 的正上方。感谢您的帮助！

我附上了一个 jsfiddle 以更好地演示发生了什么：http://jsfiddle.net/YQwZ6/

HTML：

<style type="text/css">
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript">

</script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#pocket').hide().delay(1000).fadeIn(3000).delay(2000);
    $('#pop').hide().delay(1000).fadeIn(8000).delay(2000);

});
</script>
<body>
<center>
    <div id="pics" align="center">
        <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td valign="middle" align="center">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td height="200">
                                <center>
                                    <div id="pocket" style="z-index:5000"><a><img src="http://www.cjboco.com/assets/page-extras/cj-flashy-slideshow/image_a.jpg"/></a>

                                    </div>
                                    <div id="pop" style="z-index:100"><a><img src="http://www.cjboco.com/assets/page-extras/cj-flashy-slideshow/image_b.jpg"/></a>

                                    </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>

CSS：

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
background-repeat: repeat;
color: #333366;
}
#pocket, #pop {
position:relative;
display: none;
float:center;
}
#pics {
}

【问题讨论】：

标签： html z-index fadein slidetoggle slideup

【解决方案1】：

改变这个

$('#pocket').hide().delay(1000).fadeIn(3000).delay(2000);
$('#pop').hide().delay(1000).fadeIn(8000).delay(2000);

到这里

$('#pocket').hide().delay(1000).fadeIn(8000).delay(2000);
$('#pop').hide().delay(1000).fadeIn(3000).delay(2000);

还有这个

#pocket, #pop {
position:relative;

到这里

#pocket, #pop {
position:absolute;
left: 0;
top: 0;

现在，只需将图像放置在您希望它们出现的位置即可。如果需要居中，可以在一个相对定位的DIV里面使用，这样就可以使用margin: 0 auto;居中了。

对您的 HTML 进行了一些处理，我将其清理为：

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#pocket').hide().delay(1000).fadeIn(8000).delay(2000);
            $('#pop').hide().delay(1000).fadeIn(3000).delay(2000);
        });
    </script>
</head>
<body>
    <div id="pics" align="center">
        <div id="pocket" style="z-index:5000"><a><img src="http://www.cjboco.com/assets/page-extras/cj-flashy-slideshow/image_a.jpg"/></a></div>
        <div id="pop" style="z-index:100"><a><img src="http://www.cjboco.com/assets/page-extras/cj-flashy-slideshow/image_b.jpg"/></a></div>
    </div>
</body>

</html>

CSS

#pics {
    position: relative;
    width: 200px;
    margin: 10px auto;
}

#pocket, #pop {
    position:absolute;
    left: 0;
    top: 0;
    display: none;
    float:center;
}

【讨论】：

图像 B 绝对隐藏在图像 A 后面！谢谢。但是图像 B 比图像 A 小，我希望它出现在页面的真正中心（与图像 A 相同）。当我将#pocket、#pop 更改为绝对值时，它会完全抛弃它。我将它放在 pic DIV 中的原因是，即使页面变小或变大，它也总能找到页面的中心。有什么建议吗？谢谢！
在相对于页面定位的另一个 DIV 中使用它们。我会把它写进我的答案中。
@user1886754：见This Answer希望你正在寻找这个。

【解决方案2】：

已编辑：

现在看这个例子：

SEE DEMO

如果是，那么下面给出一些更改：

CSS：

#pocket, #pop {    
    display: none;
    float:center;
}

#pocket {
    position:relative;
    z-index: 2;
    top: 0px;
}

#pop {
    position:absolute;
    z-index: 1;
    top: 180px;
}

从下面给出的 HTML 代码中删除 z-index 值：

 <div id="pocket" style="z-index:5000">
 and
 <div id="pop" style="z-index:100">

使用 jQuery：

$('#pocket').hide().delay(1000).fadeIn(1000).delay(500);
$('#pop').hide().delay(1000).fadeIn(4000).delay(500).fadeOut(500).animate({
    'z-index' : 3
}, 500).fadeIn(500);

【讨论】：

非常感谢，但不，我只是想把它淡入主图像后面（隐藏在后面），然后让它滑到主图像之上（考虑一下一张从另一张照片上方窥视的图片。
用更新的演示链接和代码相应地编辑了我的答案。