Не буду приводить пример кода так как, на мой взгляд, он тут будет лишним.
Опишу словами: у нас есть контейнер, внутри которого два элемента (пусть это будут div’ы), у первого z-index 10, у второго 20. Вроде все просто, но получается так, что первый див оказывается на переднем плане, хотя имеет более низкий индекс…
Задача мне досталась уже в таком виде в почти готовом проекте. Попробовал накидать такой код с нуля и протестировать, все заработало, как и должно было, а на рабочем сайте, не работало даже минусовое значение индекса второго элемента.
- Мистика?!
- Нет, позиционирование!
Пробежавшись по мануалам и спецификациям понял, что на позицию блока по оси Z влияет не только z-index, но порядок следования элемента в html документе, а также прозрачность (opacity) и позиционирование (отличное от значения по умолчанию).
Конкретно в моем случае помогло добавление второму диву position: relative;, но стоит обращать внимание на сочетание всех перечисленных характеристик.