Jquery 堆叠包含在单独div中的图像

请参见此处：

我无法使我的页面正常工作（也没有使用z索引进行管理）：

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

标记：

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

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

补编：

#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;
}

有人能帮我解决这个问题吗

---

罗杰

此版本的代码将所有图像置于一个图像之上：

但是，如果我将您的年度选项卡设置为内联（使它们像选项卡一样显示），那么在这个版本中，图像不会位于另一个选项卡的顶部：因为您将图像定位在每个选项卡的下方（不是全部在同一个位置）

---

我的JSFIDLE代表了我复制您所描述内容的最佳尝试。如果这不是您的意思，请更正/澄清JSFIDLE，以便每个人都能更准确地看到您的问题。

您可以通过在包含图像的div上设置z索引来解决此问题：

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

---

尝试调整索引：

$（this）.index（）

到

$（'#snapshots>div'）。索引（this）

。除此之外，请在“jsfiddle”上发布您的代码以帮助我们！罗杰，没有看到当前的CSS，我很难想象一个解决方案。我的感觉是你把太多的工作推给了JS。即使有动态内容，您也可以简单地添加/删除/切换类，或将新的/更改的内容放置在已由CSS设置样式的区域中，并且由于适用的CSS规则，各种元素将“捕捉”到位。同意，如果没有看到CSS，这是不负责任的，因为这个问题很可能是某个地方的溢出问题。谢谢。但是删除一个图像并为#snapshots>div添加样式表明#snapshot div被放在了前面：

#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;
}

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