出现在随机元素下的绝对定位 div答案

【问题标题】：Absolute positioned div appearing under random elements出现在随机元素下的绝对定位 div
【发布时间】：2017-07-12 20:05:24
【问题描述】：

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

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

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

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

我无法解决这个问题。

【问题讨论】：

如果您能在fiddle 中为我们提供一个工作示例，那就太好了。我们更容易协助选定的代码区域，而不是我们通过网站源来固定。但是，乍一看，z-index 仅适用于具有position 值的元素。否则它们不会在堆栈中，因此它们没有索引可以关闭：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/…

标签： css z-index overlap

【解决方案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>

【讨论】：

必须应用负 z-index 并不是真正的解决方案，而是一种解决方法。这里有一个更深层次的问题。
是的，这是一种解决方法。所以修复这个，意味着重写你的html和css。我的建议是在这里使用 css 网格模型或 flex 模型。这可以最大限度地减少您对绝对位置和相对位置的使用。您对相对和绝对位置的陈述不够严格。这就是为什么会出现这种效果。但这可以解决您的问题。 . .暂时。