Чистый CSS Нисходящий Z-индекс?

Question

Хотя технически я могу решить свою проблему с помощью небольшого количества jQuery, вопрос вызвал мое любопытство; Может ли неизвестное количество элементов быть z-проиндексировано в порядке убывания?

Вот мой вопрос более конкретно. У меня есть неизвестное число div с, которое будет создано PHP в цикле foreach. Проблема в том, что фон этих div (в областях) прозрачен и предназначен для наложения. Используя отрицательный CSS margin, я легко могу вытянуть элементы, чтобы они перекрывали друг друга, но проблема в том, что по умолчанию css отображает их с кажущимися более высокими индексами, когда они снижаются.

Чтобы проиллюстрировать, что я имею в виду, здесь - скрипка.

Подумав об этом в течение нескольких дней, я не смог придумать ответ. Итак, вам. Есть идеи?

P.S. Если кто-то приезжает сюда строго для решения jQuery, вот оно:

$('.myClass').each(function(index) {
    zindex = index * -1;
   $(this).css('zIndex', zindex);
});

Answer 1

Лучшим решением было бы добавление встроенных стилей в цикл PHP.

Если вы знаете длину объекта, через который вы проходите цикл, вы можете легко рассчитать встроенный стиль.

Это не самое элегантное решение, но оно всегда будет работать.

Answer 2

Сортировка , но это не очень универсально:

div:nth-last-child(1) {
    z-index: 1;
}
div:nth-last-child(2) {
    z-index: 2;
}
div:nth-last-child(3) {
    z-index: 3;
}
div:nth-last-child(4) {
    z-index: 4;
}
div:nth-last-child(5) {
    z-index: 5;
}

Вы можете просто написать сотни этих правил, или вы можете сгенерировать CSS с помощью того же скрипта / цикла, который выПишем элементы с.Или вы можете просто включить z-index во встроенный стиль элемента.

В целом, я думаю, что подход jQuery лучше - вызывает ли он функциональную проблему для пользователей без включенного JavaScript, или это так?просто эстетично?