如何调整WooCommerce中价格的z-index解决被商品缩略图遮挡的问题

核心原因 #

z-index 仅对 position 属性值为 relative/absolute/fixed/sticky 的元素生效，默认的 static 定位下配置的 z-index 不会被浏览器识别，这是你设置的层级不生效的根本原因。

修复方案 #

在你现有的价格样式代码中补充 position: relative 配置即可，修改后的代码如下：

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

异常排查 #

如果修改后依然存在遮挡问题，按以下顺序排查：

• 优先级冲突：Astra 主题、Elementor 自带的 WooCommerce 样式可能存在更高优先级的价格元素规则，可临时在属性值后加 !important 测试是否是优先级问题，确认后建议通过提升选择器精度的方式优化，不要滥用 !important。
• 父容器限制：如果价格元素的父容器设置了低于商品缩略图的 z-index，或是父容器开启了 overflow: hidden，即使价格本身层级足够也会被遮挡，可逐层检查价格上层 DOM 节点的样式配置。
• 缓存问题：Elementor 编辑器预览生效但前台不生效，大概率是缓存导致，修改后依次清除 Elementor 缓存、WordPress 缓存插件缓存、浏览器缓存后再测试。

内容的提问来源于stack exchange，提问作者Guzzz