jquery - 堆叠包含在分离的 div 中的图像

Question

请看这里:http://jsfiddle.net/hPC48/13/

我的页面无法正常工作(也没有使用 z-index 对其进行管理):

但图像应该堆叠(没有 float )，如下所示:

标记:

<div id="snapshots">
    <div title="2001">
        <img src="0.jpg" />
    </div>
    <div title="2002">

    </div>
    <div title="2003">
        <img src="3.jpg" />
    </div>
</div>

接下来，我构建导航(黑色方 block ):

$(document).ready(function() {
    var ul = $('<ul />');

    $('#snapshots > div').each(function() {
        $('<li />')
        .text($(this).attr('title'))
        .click(function() {
            console.log("clicked!");
        })
        .appendTo(ul);
    });

    ul.insertBefore($('#snapshots div').first());

最后，容器 div 的定位是绝对:

$('#snapshots > div').each(function() {
    var index = $(this).index() - 1;
    var li = $('#snapshots li').eq(index);
    var pos = li.offset();
    var w = li.outerWidth();

    $(this).css("position", "absolute");
    $(this).css("left", pos.left);
    $(this).css("width", w);
});

补充:

#snapshots {
    height: 240px;
}

#snapshots ul {
    margin: 0;
    padding: 0;
    height: 24px;
    list-style-type: none;
}

#snapshots li {
    display: inline;
    cursor: pointer;
    padding: 5px 16px;
    margin: 0px 2px 0px 0px;
    background-color: #1E242B;
    color: #e7e7e7;
}

#snapshots li:hover {
    background-color: #3C464D;
}

#snapshots > div {
    position: absolute;
    height: 400px;
    width: 50px;
    background-color: #e7e7e7;
}

谁能帮我解决这个问题？

罗杰

Answer 1

此版本的代码将所有图像都叠加在一起:http://jsfiddle.net/jfriend00/hPC48/ .

但是，如果我将您的年度标签设为内联(这样它们会像标签一样显示)，那么在此版本中图像不会彼此重叠:http://jsfiddle.net/jfriend00/hPC48/12/因为您将图像定位在每个选项卡下(并非都在同一位置)。

我的 jsFiddle 代表了我对重现您所描述内容的最佳尝试。如果这不是你的意思，那么请更正/澄清 jsFiddle，这样每个人都可以更准确地看到你在问什么。