ie7 z-index ошибка ... возникли проблемы с исправлением - PullRequest
Новая
       12

ie7 z-index ошибка ... возникли проблемы с исправлением

0 голосов
/ 04 июня 2010

У меня есть 2 столбца (несколько строк) div, как это: 

<div class="odd">
    <div class="desc"></div>
</div>
<div class="even">
    <div class="desc"></div>
</div>

классы odd и even позиционируются относительно с z-индексом 1, а классы desc позиционируются абсолютно с z-индексом 5. Он установлен так, что desc внутри odd перекрывает even вправо, а desc внутри even перекрывает odd влево.

Это прекрасно работает, за исключением ie7. desc из odd отображается как под even. Я попробовал несколько вещей, и единственное решение, которое мне пришло в голову, это просто перевернуло мою проблему. Я установил odd для z-index, равного 2, и even для z-index, равного 1, но затем desc из четных скрывает под нечетным ,

Надеюсь, это имеет смысл. Я в основном показываю продукты, когда вы наводите курсор на изображение, описание всплывает в сторону (над продуктом рядом с ним, слева или справа для четного или нечетного). Работает нормально, кроме ie8.

Есть ли исправление?

обновление

вот CSS: 

.even, .odd
{
    padding:5px;
    width:332px;
    float:left;
    position:relative;
}

.desc
{
    height:300px;
    padding:5px;
    position:absolute;
    top:30px;
    z-index:5;
    width:300px;
    visibility:hidden;
}

.even:hover .desc, .odd:hover .desc
{
    visibility:visible; 
}

.even:hover .desc:hover, .odd:hover .desc:hover
{
    visibility:hidden;  
}

.even .desc
{
    right:100%;
}
.odd .desc
{
    left:100%;  
}

1 Ответ

0 голосов
/ 04 июня 2010

Родительский z-индекс всегда имеет приоритет над его дочерним индексом. Это официальное определение поведения W3C. Так что это действительно не имеет значения, если ваши desc1 и desc2 имеют 10 и соотв. 400 как значение z-index, если у вашего нечетного класса 1 и даже 2, даже всегда будет сверху

...