用javascript动态反转z索引

我有一个客户的要求，有10个div，就像一本书中的章节。每一章的侧面都会有一个拇指切口（请参阅以了解更多说明），允许读者直接切换到该章。（我不需要翻页动画-现在…嘘！）

根据当前打开的章节，每个章节都会在页面的右侧或左侧显示缩略图。第一章只在左边有拇指切口，最后一章只在右边。根据堆叠顺序，其他章节的每个章节都必须移动其拇指切割。在这个问题上，我不是在问拇指的左右决定

我正在考虑使用z索引来确定哪个章节是“开放的”，即在顶部。如果给每个div一个0-9的数组索引，并且z索引与章节的数组索引相对应，那么这将是一个良好的静态开始。但是，当打开中间页时，这会变得很棘手，因为前面的章节将采用渐进式（0，1，…）z索引编号，而后面的章节将按照从当前打开的章节（x，x-1，x-2，…）开始的递减顺序继续编号

这是必要的，因为无论读者在章节顺序中处于什么位置，读者都必须能够看到每一章的缩略图

关于如何最好地实现这一点，有什么想法吗？Javascript是必需的，因为它是在页面加载后确定的动态函数。z-索引是最佳路线吗

注意：这是一个运行TurboLinks的Rails应用程序，因此它需要对AJAX和静态资产做出响应

编辑：页面最初在视图的右侧展开，第一页在顶部，其余页向右偏移10px。这给人一种“扇子”或书页的错觉。当第2-9页到达顶部时，编号较低的页面现在位于左侧。假设我使用一个标准的

，然后给每个div一个唯一的id，将它们相互抵消并分配一个z索引

我遇到的问题是，如果所有的s都偏移到上一个的右侧，产生了叶子效果，并且它们的宽度都相同，当我将每个s都放到顺序的顶部时，比如说

z-index=100

，它完全覆盖了除第一个之外的所有左侧div

---

拿5张名片，用右边的扇子扇出。然后拿起第三张卡片，将其置于顶部，但处于相同的相对水平位置。它完全覆盖了第二张牌，因为第二张牌不是从左手边第一张牌的下面显示出来的，而是现在被第三张牌覆盖在右手边。

就我个人而言，我只是按照最后一张到第一张（从下到上）的顺序在DOM中添加面板。然后可以使用position:absolute或position:fixed分别使它们相对于容器或屏幕重叠

---

这样，如果您想在两个值之间插入一个页面，只需在子级之间添加它，而不必跟踪两个值之间的Z索引（这意味着您需要在两个值之间保留一个索引，并处理耗尽的可能性，等等）。

为所有关闭的页面提供正常的数组索引。然后给打开的页面一个非常高的z-索引，使其高于其他页面。我真的不知道这里有什么问题…如果这些“拇指切割”应该显示在侧面，那么我不知道这与任何常规的“tab”插件可以做的有多大不同。一个静态示例显示中间一个“页面”打开时的外观可能会有所帮助。@Barmar-这不起作用，因为打开的页面会覆盖左侧或右侧。这就是为什么后续章节的索引会随着前一章节的增加而减少。@CBroe-一个选项卡不起作用，因为如果打开的章节在后面，拇指切割需要显示在左侧。请参阅我在编辑中解释的自我示例。如果您可以使用堆栈片段或JSFIDLE制作一个演示页面，显示您试图实现的目标，这将非常有帮助。我不需要插入页面，只需在顶部显示当前页面，并根据当前页面的不同，在右侧或左侧剪切拇指即可。页数将保持不变。