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

Question

I need to create a table fixed on the bottom of screen (I'm so far now) and I'd like the rows to have different z-index values, because I want them to look like 'folders' where images are sliding down into it. Please have a look on the picture below, it illustrates exactly the expecting effect. Pictures (all inserted in a long sliding div) need also different z-index settings to 'go into' folders (in fact, they have to slide under the corresponding 'folder').

In your opinion, is it possible inside the table (and inside the div for images) or should I create tables (with only one row) one below the other ? This would be complicated to apply on pictures because they're randomly positioned into a 'scroller' (refers to the div mentioned above). Any example would be more than welcome!

Answer 1

I don't know if this will work 100% for you since I'm not entering too much in how your scroll works, but I'll give you a few tips I've tested here and it actually works, but it might have you doing a few changes on some other things. Here it goes:

First of all, as I mentioned, change the nth-child part in your css to these tags:

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;
}

Now, the complicated part that may be kind of frustrating, but experiencing it was all I got. I think you will have to make a scroller for each picture to be something like this, or else the z-index will not work because all of them get the z-index from the parent. This is how I changed the CSS:

IT'S ONLY AN EXAMPLE

<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>

Notice I turned all IDs to Classes for CSS purposes (although i kept all IDs as well for your animation purposes), and of course in the CSS I replaced the # for dots. Maybe this is not the ideal way for you, but feel free to comment below. For now, its all I have to make the pictures fit in their folders. Hope it helps you somehow! :)