javascript - 是否可以为表行设置不同的 z-index 值？

Question

我需要创建一个固定在屏幕底部的表格(到目前为止我已经完成)并且我希望行具有不同的 z-index 值，因为我希望它们看起来像图像所在的“文件夹”正在滑入其中。请看下面的图片，它准确地说明了预期的效果。图片(全部插入到一个长的滑动 div 中)也需要不同的 z-index 设置才能“进入”文件夹(实际上，它们必须滑动到相应的“文件夹”下)。

在您看来，是否可以在表格内部(以及图像的 div 内部)或者我应该创建表格(只有一行)一个在另一个下面？这在图片上应用起来会很复杂，因为它们是随机放置在“滚动条”中的(指上面提到的 div)。任何例子都将非常受欢迎!

Answer 1

我不知道这是否对您 100% 有效，因为我没有过多地介绍您的卷轴的工作原理，但我会给您一些我在这里测试过并且确实有效的提示，但是它可能会让你对其他一些事情做一些改变。开始了:

首先，正如我提到的，将您的 css 中的 nth-child 部分更改为这些标签:

div .accordeon.cellule1 {
    z-index: 801;
}

div .accordeon.cellule2 {
    z-index: 803;
}

div .accordeon.cellule3 {
    z-index: 805;
}

div .accordeon.cellule4 {
    z-index: 807;
}

div .accordeon.cellule5 {
    z-index: 809;
}

现在，复杂的部分可能有点令人沮丧，但体验它就是我的全部。我想你必须为每张图片制作一个像这样的滚动条，否则 z-index 将不起作用，因为所有图片都从父级获取 z-index。这就是我更改 CSS 的方式:

这只是一个例子

<div id="scroller-wrapper" class="scroller-wrapper"  style="z-index: 804">
   <div id="scroller" class="scroller slidedown">
         <div id="img-defile1" class="img-defile">
            <img src="img/ceaac.jpg"/>
         </div>
    </div>
</div>
<div id="scroller-wrapper" class="scroller-wrapper"  style="z-index: 806">
   <div id="scroller" class="scroller slidedown">
         <div id="img-defile2" class="img-defile">
            <img src="img/ceaac2.jpg"/>
         </div>
    </div>
</div>
<div id="scroller-wrapper" class="scroller-wrapper"  style="z-index: 802">
   <div id="scroller" class="scroller slidedown">
         <div id="img-defile3" class="img-defile">
            <img src="img/ceaac3.jpg"/>
         </div>
    </div>
</div>
<div id="scroller-wrapper" class="scroller-wrapper"  style="z-index: 800">
   <div id="scroller" class="scroller slidedown">
         <div id="img-defile5" class="img-defile">
            <img src="img/ceaac5.jpg"/>
         </div>
    </div>
</div>
<div id="scroller-wrapper" class="scroller-wrapper"  style="z-index: 808">
   <div id="scroller" class="scroller slidedown">
         <div id="img-defile6" class="img-defile">
            <img src="img/clic_clac.jpg"/>
         </div>
    </div>
</div>
<div id="scroller-wrapper" class="scroller-wrapper" style="z-index: 802">
   <div id="scroller" class="scroller slidedown">
         <div id="img-defile7" class="img-defile">
            <img src="img/heschung.jpg"/>
         </div>
    </div>
</div>

请注意，出于 CSS 的目的，我将所有 ID 都转换为类(尽管为了您的动画目的，我也保留了所有 ID)，当然，在 CSS 中，我将 # 替换为点。也许这不是您的理想方式，但请随时在下方发表评论。现在，我只需要让图片适合它们的文件夹即可。希望它能以某种方式帮助你! :)