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

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

http://www.saradouglas.net/home

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

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

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

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

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

Источник

3 ответа

Решение

Если я правильно помню, порядок приоритетов z-индексов выглядит примерно так:

  • холст (где нарисован элемент / область рисования родителей)
  • бг изображения
  • z-индекс: -1
  • по умолчанию (0)
  • z-индекс: 1+

Когда вы даете любому дочернему элементу z-index из -1, он не будет ниже фона родителя из-за приоритета родителя.

Вот ваше решение (только что попробовал на firebug и оно работает):

  1. Удалить изображение BG из #menu и добавить отдельный div под ul.menu перед li"S.
  2. Дайте CSS ниже к этому div,
  3. Теперь дайте всем этим мазкам z-index меньше чем -1 -2 работает.

И это должно быть так.

CSS:

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background: url(...);

Я знаю, что это не так много смысла, но, эй, это работает, верно?:П

Источник

Вы должны установить относительное положение в вашем меню div, а затем добавить абсолютное позиционирование div в меню меню. тогда при разных разрешениях экрана это не проблема.

Источник

Вы можете сделать это, просто установив bg, paddings и height на ul вместо <div id="menu">

Источник
Другие вопросы по тегам