z-index не работает должным образом (Chrome и Opera)

Question

У меня есть div с классом «непрозрачный» и другой с классом «product-info», которые находятся на одном уровне.

Код выглядит следующим образом:

<div class="opaque"></div>
<div class="product-info">
    <img class="product-image" src="/Images/D3.jpg" />
    fsdfdsfsdfs
</div>

.opaque 
{
    background-color: White;
-moz-opacity:.60; filter:alpha(opacity=60); opacity:.60;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
}

.product-info 
{
padding: 5px;
text-align: center;
z-index: 2;
}

Обратите внимание, что для product-info установлено значение z-index 2, а для opaque - z-index 1. Поэтому информация о product должна отображаться поверх непрозрачного, поэтому не должна быть блеклой.Однако изображение в product-info (и текст) блекло.Это происходит как в Chrome, так и в Opera, поэтому я ожидаю, что именно это и должно происходить, поскольку они не IE!

Существует множество битов HTML-кода, как показано выше, каждый из которых вложен в lis, для которых установлено значение floatосталось с шириной 33%.Когда страница полностью загружена ($(window).load()), я использую jQuery, чтобы определить максимальную высоту всех продуктов и применить эту высоту ко всем остальным.Я попытался удалить все jQuery на случай, если это повлияет на z-index, но я получаю тот же результат только с неопрятным внешним видом.

Я пытался использовать инструмент Google Chromes Inspect Element и элементы вВопрос показывает правильные характеристики.

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

Спасибо.

С уважением,

Ричард

Полный код по запросу:

Я думаю, что это все, что требуется.Через несколько минут я создам страницу с этим кодом, чтобы узнать, воспроизводит ли она проблему.

<div id="BodyTag_ContentPanel">
    <div class="overlay-background"></div>
    <div class="scroll-pane">
        <div>
            <ul class="product-list">
                <li class="product">
                    <div class="spacer">
                        <div class="opaque"></div>
                        <div class="product-info">
                            <img class="product-image" src="/Images/D3.jpg" />
                            <div class="enlarge">
                                <div class="image-enlargement">
                                    <span class="close"><img src="/Images/close.jpg" /></span>
                                    <div class="enlargement">
                                        <div class="image-container"><img src="/Images/D3.jpg" /></div>
                                        <div class="product-code"><span class="text-container">D3</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="product-code">D3</div>
                        <div class="clear"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

.product-list 
{
    list-style: none;
    padding: 0;
    width: 100%;
}

.product 
{
    width: 33%;
    height: 25%;
    float: left;
    position: relative;
}

.product .spacer 
{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin: 10px;
    padding: 5px;
    border: 4px solid #C47F50;
    position: relative;
}

.product .opaque 
{
    background-color: White;
    -moz-opacity:.60; filter:alpha(opacity=60); opacity:.60;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.product .product-info 
{
    padding: 5px;
    text-align: center;
    z-index: 2;
}

.product .product-info .product-image 
{
    max-width: 200px;
    max-height: 200px;
    min-width: 150px;
    min-height: 150px;
    z-index: 2;
}

.product .product-code 
{
    position: absolute;
    bottom: -15px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    background-color: White;
    text-align: center;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 4px solid #C47F50;
    line-height: 20px;
    z-index: 2;
}

.product .image-enlargement 
{
    position: fixed;
    display: none;
    padding: 5px;
    background-color: White;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 4px solid #C47F50;
    z-index: 103;
}

.product .enlarge
{
    float: right;
}

Answer 1

Я нашел решение !! Я просто добавил position: relative; к .product-info. Я не могу поверить, что я был настолько глуп, чтобы не пытаться сделать это в первую очередь! Спасибо за ваши усилия @Thomas & Lazycommit. @Lazycommit пригодилась ваша ссылка - она ​​подтвердила, что мой код должен был работать, если бы не пропустить position: relative;. Я заметил, что они установили атрибут позиции для всех элементов div в примере - это то, что заставило меня попробовать это.

Answer 2

Это большая тема.Вы можете посмотреть эту страницу от разработчиков Firefox для лучшего понимания стекирования браузеров.

Answer 3

Попробуйте установить z-индекс элемента, который должен быть сзади, в отрицательное число, например -1:)

Answer 4

если есть внешний div для установки position: fixed;, и вам нужно position: fixed;, добавьте z-index так же, как внутренний div.Например:

.notifications {
    position: fixed;
    width: auto;
    max-width: 70%;  
    z-index: 9999;
}

.notifications > div {
    position: relative;
    z-index: 9999;
    /*  margin: 5px 0px;*/ /*default value*/
    margin: 65px 10px;
    display: inline-block;
}

будет работать нормально.

Но если класс уведомлений, как показано ниже, он не устанавливает z-index в Chrome правильно.

.notifications {
    width: auto;
    max-width: 70%;  
    z-index: 9999;
}

Answer 5

Я знаю, что это старый, но вы можете использовать rgba () вместо непрозрачности и избавиться от div "product-info".Это дает тот же эффект, что и вы, так как rgba () использует другой метод создания прозрачности, который не делает дочерние элементы прозрачными.Делает эффект, который вы хотели, намного проще.