我有一个客户要求，有10个div，就像书中的章节一样。每一章都有一个缩略图（参见here澄清），允许读者直接切换到该章节。 （我不需要翻页动画 - 但是......嘘！）。
每章都会在页面的右侧或左侧显示缩略图，具体取决于当前打开的章节。第一章只有左边的缩略图，最后一章只在右边。其他每个章节都必须根据堆叠顺序中的位置移动缩略图。我在这个问题上没有询问拇指右/左判断。
我正在考虑使用z-index来确定哪个章节是＆＃34;打开＆＃34;，即。在上面。如果给每个div一个0-9的数组索引，并且z-index与该章的数组索引相对应，那将是一个很好的静态启动。但是，当你打开中间页面时会变得棘手，因为前面的章节会有渐进式（0,1，...）z-index编号，而后面的章节将继续这些数字，从当前打开的顺序递减章节，（x，x-1，x-2，......）。
这是必要的，因为无论读者在章节顺序中的哪个位置，读者都必须能够看到每个章节的缩略图。
关于如何最好地实现这一点的任何想法？ Javascript是必要的，因为它是页面加载后确定的动态函数。 z-index是最佳途径吗？
注意：这是一个运行TurboLinks的Rails应用程序，因此它需要响应AJAX和静态资产。
编辑：页面最初在视图的右侧散开，第一页在顶部，其余页面向右偏移10px。这给了一个“粉丝”的错觉。或书的页面。当第2-9页到达顶部时，编号较低的页面现在偏离左侧。假设我使用标准<div class="chapter">，然后给每个单独的div一个唯一的id，将它们相互抵消并指定一个z-index。
我遇到的问题是，如果所有的s都偏移到前一个的右边，创建了漂浮效果，并且它们都是相同的宽度，因为我将每个s带到了订单的顶部，说{ {1}}，它完全覆盖了除第一个之外的所有左侧div。
拿出5张名片，然后用右侧的风扇将它们扇出来。然后取第3张牌并将其带到顶部，但处于相同的相对水平位置。它完全覆盖第二张牌，因为第二张牌不是从左侧第一张牌下面显示的，现在被牌＃3覆盖在右侧。
答案 0 :(得分：0)
就个人而言，我只是按照最后到第一个（从下到上）的顺序在DOM中按顺序添加面板。然后，您可以使用position：absolute或position：fixed来使它们分别相对于容器或屏幕重叠。
这样，如果你想在两者之间注入一个页面，你可以在子节点之间添加它，而不是跟踪两个值之间的Z索引（这意味着你需要保留中间值和交易）你可能会用完等等。