堆叠包含在分隔的div中的图像

Question

请参阅此处：http://jsfiddle.net/hPC48/13/

我没有让我的页面工作（也没有用z-index管理它）：

但图像应堆叠（不浮动），如下所示：

标记：

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

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

接下来，我构建导航（黑色瓷砖）：

$(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，这样每个人都可以更准确地看到你所询问的内容。

Answer 2

您可以通过在包含图像的div上设置z-index来修复它：

$('#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);

     $(this)
     .has('img')
     .css("z-index", "999");
});