Почему не работает z-index для карточки товара WooCommerce?

Question

Всем привет! Делаю магазин на WP, есть следующая задача:

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

.descr {
    display: none;
}
.woocommerce ul.products li.product:hover .descr {
    display: inline;
}

Всё ок, описание подтягивается, при этом толкает нижний элемент карточки. Чтобы "толчка" не происходило, я решил наложить z-index, вот так:

.woocommerce ul.products li.product:hover {
    box-shadow: 0 0 35px #40d143;
    padding: 5px;
    position: relative;
    z-index: 999;
}

Но беда, ничего не произошло!

Подскажите, пожалуйста: в чём дело?

З.Ы. желательно решить кейс с помощью css, потому что JSa вообще не знаю :( Это возможно?

Answer 1

На тех элементах, которые собрались при помощи z-index выстраивать, нужно всем указать position. Вот только есть мнение, что это не поможет, если ваши блоки расположены не выше и ниже, а слева и справа относительно друг друга.

Когда какому-то блоку прописываете display: none;, то его ширина становится 0 пикселов, а когда снова прописываете display: inline; то он обретает свою ширину и толкает другие блоки. Чтобы решить именно эту проблему, лучше такому блоку прописать прозрачность: opacity: 0;, а при наведении мышки смените на единицу. Так блок будет невидимым, но габариты свои не потеряет. Соседние блоки будут его габариты учитывать.

БЛОГ НА HUSL

Почему не работает z-index для карточки товара WooCommerce?

Ответы (1 шт):