Свойство z-index не вызывает наложения в IE8

Question

.thumbnail:hover
{
    background-color: transparent;  
    z-index: 1;
}

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

Это полные стили, связанные с миниатюрами

.thumbnail {
    position: relative;
    z-index: 0;
}

.thumbnail:hover {
    background-color: transparent;
    z-index: 50;
}

.thumbnail span {
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    right: -500px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.thumbnail span img {
    border-width: 0;
    padding: 2px;
    width: 400px;
    height: 300px;
}

.thumbnail:hover span {
    visibility: visible;
    top: 0;
    right: -290px;
    vertical-align: top;}
 The HTML part for the CSS is mentioned below : <a id="aPhotos" href="SubscribersPropertyDetail.aspx" class="thumbnail" runat="server"> <img id="imgPhotos" border="0" height='130' width='150' title='Click to view full details about this property' runat="server" /> <span id="spanZoom" runat="server"> <img id="imgzoomphotos" src='~/images/PropertyImages/NoImage.jpg' runat="server" /></span> </a>                                                                                                                                                                  

Answer 1

Без всего вашего кода (или, по крайней мере, большего количества кода) это трудно оценить. Как правило, чтобы IE работал, вы должны установить положение элементов на относительное или абсолютное. Также родительский элемент должен быть установлен в position :lative; z-index: 1. Если это не работает, пожалуйста, напишите больше информации. Спасибо!

EDIT

Ах, теперь я понял. Вам нужен промежуток, который является потомком .thumbnail, чтобы появиться при наведении курсора. Некоторые браузеры позволяют это на основе порядка элементов. Чтобы убедиться, что это работает

.thumbnail {
    position: relative;
    z-index: 1;
}

.thumbnail:hover {
    background-color: transparent;
}

.thumbnail span {
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    right: -500px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    z-index: 50;
}

Answer 2

Я добавил свойство z-index для thumbnail: hover span style для более высокого значения, чем у стиля thumbnail.Это сработало !!.thumbnail: hover span {/ CSS для увеличенного изображения при наведении / visibility: visible;верх: -140 пикселей;/ * положение, в котором увеличенное изображение должно смещаться по горизонтали * / влево: -500px;z-индекс: 51;}

Answer 3

У вас есть свойство position, установленное в другом .thumbnail селекторе?

.thumbnail:hover {
    background-color: transparent;
    position: relative;
    z-index: 2;
}