выпуск z-index в Firefox 5, Chrome - PullRequest
Новая
       28

выпуск z-index в Firefox 5, Chrome

0 голосов
/ 05 июля 2011

Я нахожусь в процессе исправления css для IE6 и 7, и я столкнулся с некоторыми проблемами z-index.Ничего страшного, я просто прошел их по одному.Хорошо пытаясь их исправить, я обнаружил большую проблему с z-индексами в Firefox и Chrome.У меня есть ссылка в шапке, которая при нажатии вызывает раскрывающийся список, чтобы скользить вниз.Проблема в том, что он опускается за область навигации чуть ниже заголовка.

Вот css для выпадающего списка и навигации: 

#topNav{
    width:100%;
    height:50px;
    line-height:50px;
    z-index:1;
    position:relative;
}

#minicart{
    position:relative;
    width:355px;
    height:auto;
    z-index:1000;
    background-color:#fff;
    top:0px;
    right:0px;
    float:right;
    -moz-border-radius:3px;
    border-radius:3px;
    border:1px solid #000;
    -moz-box-shadow:0 0 10px 0 #666;
    -webkit-box-shadow:0 0 10px 0 #666;
    box-shadow:0 0 10px 0 #666;
    behavior:url(http://192.168.1.104/magento/skin/frontend/asi/default/assets/PIE.htc);
    color:#000; 
    z-index:9999;
}

Итак, вы можете видеть, что #minicart z-index намного выше, чем #topNav.Что я не могу понять, так это то, почему #topNav находится сверху, хотя z-index меньше.

Есть предложения?

Ответы [ 2 ]

0 голосов
/ 06 июля 2011

Скорее всего, ваш #minicart имеет предка, который формирует новый контекст стека (например, имеет неавтоматический z-индекс или применено преобразование CSS или имеет непрозрачность, не равную 1) и имеет z-порядок ниже#topNav.Трудно сказать что-то большее, не видя реальной страницы.

0 голосов
/ 05 июля 2011

Сначала удалите один из двух z-index, которые есть у одного и того же элемента.

Затем сделайте некоторые неисправности трудным способом. Уберите (закомментируйте) все строки кода и оставьте только z-index вместе с каким-то способом сделать их визуальными, например background-color.

Если это работает, добавляйте по одной строке за раз и проверяйте.

Если не не работает, значит, на вашей странице что-то не так.

...