reversing z-index based from page render order

Question

Example Markup:

    
Trigger
    
This is some content



        
      

Answer 1

I had exactly this problem, but an indeterminate number of elements, and possibly too many to make the CSS hack posted by jamie-wilson feasible. Also, since my page is generated dynamically with PHP, I didn't want to fuss with reversing the order of everything in the DOM and using flexbox the way Sandy Gifford suggested. I found an extremely simple and elegant jQuery solution to use instead:

$(document).ready(function() {

  var item_count = $('your-selector').length;

  for( i = 0; i < item_count; i++ )
  {
    $('your selector').eq( i ).css( 'z-index', item_count - i );
  }

});

I can't speak to how performant this is, but with ~35 items I didn't notice any delays.