манипулирование z-индексом изображения с помощью jQuery

Question

У меня есть ряд всплывающих изображений размером 160x160px, измененных браузером до 100x100px.

При наведении курсора изображения анимируются до их обычного размера, а поля изменяются, чтобы сохранить их в одном месте.1004 * Чего я хочу добиться дальше, так это чтобы увеличенное изображение переместилось вперед, а затем назад после события наведения.Я пытаюсь достичь этого путем добавления и удаления класса, где z-index равен 100.

HTML-код:

    <div id="content_top">
        <img class="thumbnail" src="images/thumbs/thumb1.jpg" width="100"  height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb2.jpg" width="100" height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb3.jpg" width="100" height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb4.jpg" width="100" height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb5.jpg" width="100" height="100" border="0" alt=""/>
    </div>

С помощью CSS:

#content_top {
      height: 210px;
}

#content_top img{
      float:left;
      padding: 0 0 0 10px;
    }

    .ontop {
      z-index: 100;
    }

Я использую jQuery:

$('#content_top img').hover(function(){
    $(this).filter(':not(:animated)').animate({
        'width' : '160px',
        'height' : '160px',
        'marginLeft' : '-30px',
        'marginRight' : '-30px',
        'marginBottom' : '-30px'
        }, 'fast', 'linear'
    ).addClass('ontop');
}, function(){
    $(this).animate({
        'width' : '100px',
        'height' : '100px',
        'marginLeft' : '0px',
        'marginRight' : '0px',
        'marginBottom' : '0px'
    }, 'fast', 'linear'
    ).removeClass('ontop');
}); 

Все отлично работает, кроме части z-index.Я проверил, что класс добавляется, и это так.Пробовал различные способы позиционирования изображений, даже оборачивая их в контейнеры div и изменяя их z-индекс.

Что я пропустил?

Спасибо.

Answer 1

Свойство z-index работает только для позиционированных элементов.

Попробуйте это ...

#content_top img{
    position:relative;
    z-index:1;
    float:left;
    padding: 0 0 0 10px;
}

#content_top img.ontop {
    z-index: 2;
}

Вот рабочее решение: http://jsfiddle.net/Wgy3E/1/

Answer 2

z-index работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная или позиция: фиксированная).[ w3schools ]

Answer 3

работает определение более низкого z-индекса в img? еще попробуйте использовать jquery .setStyle ({z-index: ''}); на более низкое значение вместо удаления класса.