无法让 jQuery 在图像后面滑动答案

【问题标题】：Can't get jQuery to slide behind an image无法让 jQuery 在图像后面滑动
【发布时间】：2011-09-10 07:18:43
【问题描述】：

所以我试图产生一种效果，即当您单击图像时，另外两个图像（存储在#sharebar 中）将从左侧滑出。目前的问题是当图像滑出时，它们从按钮下方的左侧滑动，然后在动画完成后向上移动。我希望所有内容始终处于同一水平，以便图像看起来从后面滑出。

谁能帮帮我？这是我所拥有的：

    <script>
    $(function() {
        // run the currently selected effect
        function slideOut() {

            var options = {};


        $("#sharebar").toggle("slide", options, 500,  callback() ); 

        };

        function callback() {

        };

        // set effect from select menu value
        $( "#download_link" ).click(function() {
            slideOut();
            return false;
        });

        $("#sharebar").hide();

    });
    </script>

</head>
<body>

<div style="margin:200px;min-height:10px;background:#e9e9e9;overflow:hidden;">

<img  id="download_link" src="Download.png" style="z-index:2;"/> 
<span id="sharebar" style="width:20px;z-index:1;">
<img id="exercise_link" src="exercises.png" /> 
<img id="subtitles_link" src="subtitles.png" />
</span>

提前致谢！ :)

编辑：我认为这可能与 z-index 有关，但我不太确定

【问题讨论】：

能否也提供示例html？

标签： javascript jquery css jquery-ui slide

【解决方案1】：

将“top”元素设置为 style="position:fixed" 解决了问题！

编辑：哈哈不知道为什么会有一个downvote，它最终解决了问题......：P

【讨论】：

@Wex。哈哈哈 Wex... 史诗般的失败！这是作者的自我回答！
我的错！哈哈。小心使用 position:fixed 。 z-index 可能是您将多个项目分层的更安全的方式。

【解决方案2】：

我肯定会说 z-index 将是要走的路。看起来你已经设置了一些 z-index 的东西；只需修复您的 z-index，以便图像像您想要的那样叠加在一起。

<img id="download_link" src="Download.png" style="z-index:2;"/> 
<span id="sharebar" style="width:20px;z-index:0;">
<img id="exercise_link" src="exercises.png" style="z-index:1" /> 
<img id="subtitles_link" src="subtitles.png" style="z-index:1" />

顺便说一句：最好将这些style 属性粘贴到CSS 文档中，而不是将它们放在HTML 标记中。

【讨论】：