如何更改 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，您必须设置 position 属性而不是 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;
}