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

Question

我需要创建一个 table 固定在屏幕底部（到目前为止我已经完成）并且我希望这些行具有不同的 z-index 值，因为我希望它们看起来像 'folders' 图像滑入其中。请看下面的图片，它准确地说明了预期的效果。图片（全部插入长滑div）也需要不同的z-index设置到'go into'文件夹（其实要滑到对应的'folder'下）。

在您看来，是否可以在 table 内部（对于图像在 div 内部），或者我应该在 tables（只有一行）下面创建一个其他？这在图片上应用起来会很复杂，因为它们随机放置在 'scroller' 中（指上面提到的 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 中，我替换了# 表示点。也许这不是您的理想方式，但请随时在下方发表评论。现在，我只需要让图片适合它们的文件夹即可。希望它能以某种方式帮助你！ :)

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

Is it possible to set different z-index values for table rows?

javascript

css

z-index

这只是一个例子