Как сделать, чтобы появляющийся блок с position:absolute был поверх того, что снизу?

Question

[pashabomber]

Добрый день!

Сайт bimicon.volodin-web.ru

На нем есть блок "ПОПУЛЯРНЫЕ ТОВАРЫ" со слайдером товаров. У каждого товара есть внизу блок с текстом с position:absolute, который появляется при наведении на товар. Под слайдером находятся "кружочки" управления и кнопка "Все товары".
Проблема следующая - появляющийся блок упорно встает ПОД кружочки и кнопку. Товару, появляющемуся блоку заданы высокие z-index, но не помогает.
Вчера уже задавал этот вопрос тут. Мне посоветовали задать блоку с кнопкой и блоку с кружочкам z-index: -1; Это решило проблему в другую сторону. Выпадающий текст товара стал появляться сверху, все отлично, но после этого невозможно нажать на кнопку или кружочки.

Помогите, пожалуйста, решить проблему! Как сделать, чтобы кружочки и кнопка были доступны для нажатия, но при этом появляющийся текст товара при ховере был поверх них?
Уже сломал всю голову...

Заранее спасибо за помощь!

Answer 1

[Андрей Б.]

Тут без скриптов не обойтись к сожалению.

// jquery
$(".catalog-item").hover(function(){
    $(this).closest('.slick-list').toggleClass('slider-hover');
});

//css
.catalog-slider .slider-hover {
    z-index: 1;
}

Или так:

$(".catalog-item").hover(
    function(){      
        $(this).closest('.slick-list').css('z-index', 1)
    },function(){   
        $(this).closest('.slick-list').css('z-index', 0)  
});

Comments

[pashabomber]

Спасибо! Попробую.

[pashabomber]

Спасибо огромное! Помогло)