如何更改 Woocommerce 中价格的 Z-index？

Question

我正在使用带有 Astra 主题和 Elementor 的 Woocmmerce。我已经习惯在这里和那里使用 CSS 来避免使用昂贵的插件来调整我的 Woocommerce 商店。我决定在缩略图上使用价格，并为缩略图设置了负底部填充以将价格和“添加到购物车”拖得更高。我可以看到该按钮的 z-index 肯定高于缩略图。问题是价格完全被缩略图隐藏了，即使在 Elementor 中它在缩略图之上。我尝试在 CSS 中使用 z-index 但无济于事。我错过了什么吗？ 这是我的 CSS 代码示例。

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

Answer 1

也许使用!important，如果z-index 已经设置在.woocommerce 的其他地方：

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

Answer 2

对于具有 z-index 的项目，您必须设置除静态之外的位置属性。 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;
}