Почему jquery Mega Menu отображается за моими изображениями в IE7 и 9? - PullRequest
Новая
       24

Почему jquery Mega Menu отображается за моими изображениями в IE7 и 9?

3 голосов
/ 19 февраля 2012

У меня есть веб-страница с мегаменю jquery вверху, а прямо под ним - jqGrid.Когда я наводю курсор мыши на меню, появляется подменю, но оно отображается «позади» jqGrid.Я попытался зайти в dcMegaMenu.css и добавить: 

z-index:2000;

это изображение взято непосредственно со страницы примеров , где эта проблема воспроизводима

enter image description here

enter image description here

повсюду, но он все еще обнаруживается позади изображений?Есть предложения?

Ответы [ 4 ]

4 голосов
/ 22 февраля 2012

Эта проблема вызвана ошибкой IE7 . Цитирую себя из связанного ответа:

[Вот] некоторые ресурсы, которые объясняют проблему:

Общая идея - тыкать position: relative (обычно удаляйте его) и z-index в родительские элементы проблемного элемента, пока он не будет исправлен.

Единственный способ, как эта проблема может возникнуть в IE9, - это если IE9 отображает страницу в режиме совместимости (или иным образом использует режим IE7). Нажмите F12, чтобы открыть Инструменты разработчика, чтобы увидеть, какой режим используется.

Чтобы исправить эту проблему в IE7 на странице, на которую вы ссылались , вам нужно на .demo-container добавить position: relative; z-index: 1;.

Если вы не можете перевести это исправление на вашу реальную страницу, я могу помочь вам, если вы дадите ссылку на вашу реальную страницу (или точный тестовый пример: http://jsfiddle.net/ / http://jsbin.com/).

Вот скриншот из IE9 в режиме IE7 с исправлением, примененным с помощью Инструментов разработчика:

1 голос
/ 19 февраля 2012

Без показанного кода все, о чем я могу думать, это то, что z-index будет делать ничего , если элемент не позиционирован: 

#wontwork {
  z-index: 10000;
}

#willdosth {
  position: absolute; /* or relative or fixed */
  z-index: 1;
}

#also { /* link below */
  transform: sth;
  z-index: 1;
}

Ссылка : https://developer.mozilla.org/en/Understanding_CSS_z-index
Для части о преобразовании и z-index: https://stackoverflow.com/a/7765214/137626

0 голосов
/ 13 сентября 2016

используя позицию: абсолютный; просто добавьте z-index: 1; поскольку элемент с большим порядком стека всегда находится перед элементом с меньшим стеком, z-index может использоваться для управления порядком стека и используется только для позиционированного элемента

0 голосов
/ 18 апреля 2014

Это может быть решено с помощью z-index:1; Но относительно позиционируемого элемента. как объяснено на w3school.com, z-index можно использовать только с позиционированными элементами. Так что, если вы установите элементы списка мегаменю в относительное положение position:relative; и используете z-index:1;, будет работать.

...