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

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;
}

CodePudding user response：

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;
}

CodePudding user response：

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

}

Maybe with !important if z-index is already set somewhere else in woocommerce.