Z-индекс и относительное / абсолютное позиционирование

У меня проблемы с z-index и позиционированием. В основном, когда вы наводите курсор мыши на пункты меню (дома, около и т. Д.), Брызги краски должны загружаться под меню:

http://www.saradouglas.net/home

Таблица стилей находится здесь.

Это работало нормально, когда каждый элемент заставки был установлен в абсолютное положение, но я понял, что они будут появляться в разных местах при разных разрешениях экрана. Я думал, что это будет просто случай изменить это на относительное расположение, а затем соответствующим образом скорректировать координаты. К сожалению, теперь мои брызги не появляются в меню, как они должны.

Чтобы уточнить, я хочу, чтобы всплески появлялись под меню - поэтому меню всегда должно появляться поверх всплесков. Это стало проблемой только после установки меню на относительное, а эти всплески на абсолютное.

Я надеюсь, что это легко исправить, и я просто что-то упустил. Я надеюсь, что кто-то здесь может сказать мне, где я ошибся, и предложить решение!

До сих пор было несколько хороших ответов, но, к сожалению, они не решили мою проблему. Я попытался добавить фон меню в класс ul, а не в div, но это не имело значения для проблемы.

Ответы на вопрос(3)

Ваш ответ на вопрос