How to change Z-index for the price in Woocommerce?

Question

I am using Woocmmerce with Astra theme and Elementor. I am already used to use CSS here and there to avoid using expensive plugins to adjust my Woocommerce shop. I decided to use price over the thumbnail and I made negative bottom padding for thumbnails to drag the price and "Add to cart" higher. I can see that button is definitely higher in z-index than a thumbnail. The problem is the price is completely hidden by the thumbnail, even though in Elementor it's over the thumbnail. I tried to use z-index in CSS but to no avail. Am I missing something? Here is an example of my CSS code for the price.

.woocommerce div.product p.price, .woocommerce div.product span.price{
    background-color: #fff;
    z-index: 99;
}

user_3821467 · Answer

For an item to have a z-index, you have to set a position attribute other than static. https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

.woocommerce div.product p.price, .woocommerce div.product span.price{
    background-color: #fff;
    z-index: 99;
    position: relative;
}

user_12108257 · Answer

Maybe using !important, if z-index is already set somewhere else in .woocommerce:

.woocommerce div.product p.price, .woocommerce div.product span.price {
    background-color: #fff;
    z-index: 99 !important;
}

How to change Z-index for the price in Woocommerce?

2 Answers