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

Question

我需要创建一个固定在屏幕底部的表格（我现在到目前为止）并且我希望这些行具有不同的z-index值，因为我希望它们看起来像＆ ＃39;夹＆＃39;图像向下滑入其中。请看下面的图片，它说明了预期的效果。图片（全部插入长滑动div）也需要不同的z-index设置才能进入＆＃39;文件夹（事实上，他们必须在相应的＆＃39;文件夹下滑动。）

在您看来，是否可以在表格内部（以及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都转换为Classes（虽然我保留了所有ID以用于动画目的），当然在CSS中我替换了#作为点。也许这对你来说不是理想的方式，但请随时在下面发表评论。现在，我必须使图片适合他们的文件夹。希望它能以某种方式帮助你！ ：）