jQuery onHover显示Div，z-index问题

Question

我的问题可以在这里看到： http : //jasonnarciso.com/dev/cmwd/concrete-solutions/

基本上，我有一个非常简单的jquery脚本，当.item元素悬停时，该脚本显示了一个div。 工作正常，但在左侧和底部容器上，div被切断。

显然，这是z-index问题，但是我想知道是否应该使用jquery设置z-index？ 还是有另一种方法可以强制它达到最高索引？ 我尝试在容器上使用不同的值，但似乎没有任何效果。

任何帮助是极大的赞赏。

Answer 1

好的，我现在看到了问题。

我认为有两个问题，编码问题和设计问题。

让我们从设计开始。 ＃product-boxes容器具有宽度，因此您不应显示超出该宽度的内容。 的确，如果删除隐藏的溢出，您将解决右盒剪辑的问题，但这并不是完美的，因为悬停效果将导致水平滚动条。

关于底部的盒子，即使没有隐藏的溢出，它们也总是会被裁剪，这仅仅是因为容器的高度不足以显示悬停的盒子。 即使在这种情况下，也没有隐藏的溢出，您仍将导致垂直滚动条。

关于编码，应该以这种方式删除clearfix，只需在浮动元素之后执行以下操作即可：

<br class="clear" />

并在您的CSS中：

.clear {display: block; clear: both; height: 0px;}

然后，要解决底切问题，您必须将＃product-bozes css修改为：

#product-boxes {
    /* REMOVED overflow: hidden; */
    padding: 35px 0px 200px 52px;
}

多余的填充将为容器提供足够的空间来显示叠加层。 我在Firebug中对其进行了测试，并且工作正常。

Answer 2

您在CSS中有这个：

#product-boxes {
    overflow: hidden;
}

因此，当一个孩子（例如您的菜单）需要在产品框外进行渲染时，它将被裁剪。 您有一个overflow问题，而不是z-index问题。 我看不到任何overflow: hidden;需要overflow: hidden; 在该页面上，仅应在需要剪切包含的内容时使用它。

Answer 3

关于mu的回答，如果不可能发生， 则太短了 overflow:hidden我建议您更改该箭头的位置并将其放置在上方一点。