css - 绝对定位的 div 出现在随机元素下

Question

本站:https://dev.romaycorp.com/shop/

如果您将鼠标悬停在“产品”上方，下方的图片会重叠。一些随机元素出现在顶部，有些则没有。那些图像确实如此。

此页面上的边框做同样的事情:https://dev.romaycorp.com/product-category/silicone-nitrade/

我已经尝试了每个可以想象到的元素的每个 z-index 设置。

我无法解决这个问题。

Answer 1

您的 CSS 有点笨拙。但是发现了你的错误。

添加到类 .product-category .product z-index: -1 这将解决您的问题。

在这里你应该添加源:

<li class="product-category product">
    <a href="https://dev.romaycorp.com/product-category/cermet/"><img src="https://dev.romaycorp.com/wp-content/uploads/2017/07/store-cermet-insert-2.jpg" alt="Cermet" width="300" height="300" data-pin-nopin="true">     <h2 class="woocommerce-loop-category__title">
            Cermet <mark class="count">(72)</mark>      </h2>
    </a>
</li>