Неперебиваемый фон

Есть див с фоновой картинкой, в нем другой див тоже с фоновой картинкой. Фон родителя сверху. Всегда. Не перебивается вообще ничем. Ставишь обоим дивам position: relative; и ребенку z-index:1; - пофиг! Хоть 10 z-index, хоть миллион, бесполезно. Да, я знаю, что у элементов с явно заданным позиционированием z-index должен работать, но тут явно не тот случай. В статье на хабре прочитал что надо родительскому диву установить прозрачность opacity: 0.99; Бесполезно. Плевать он хотел на прозрачность. Расскажите, пожалуйста, поподробнее про это явление ничем не убиваемого фона, который сверху всегда и которому все зет-индексы нипочём… Заранее спасибо.

Фон родителя - картинка jpg, фон ребенка - картинка png. На всякий случай, если это важно.

Из Вашего описания не совсем понятно, почему фон родителя сверху.
Пример кода можно?

1 лайк

Да, конечно. Вот:
image

А вот CSS:
image

А вот результат:

В итоге я нашел другое решение, с отрицательными маргинами, и всё получилось. Но так и не пойму, почему здесь не получается управлять фонами с помощью Z-index. Видимо я что-то делаю неправильно, но не знаю что именно.

P.S. Кажется, проблема в том, что я пытаюсь двигать фон блока, не двигая сам блок. А свойство z-index срабатывает для блоков, а не для фонов.