jQuery on Hover Show Div，z-index问题

Question

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

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

显然这是一个z-index问题，但我想知道我是否应该用jquery设置z-index？还是有另一种方法迫使它达到最高指数？我试过在容器上玩不同的值，似乎没有任何工作。

非常感谢任何帮助。

Answer 1

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

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

让我们从设计开始。 #products-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;，您只应在需要剪辑所包含的内容时使用它。

Answer 3

参考mu is too short的回答，如果无法overflow:hidden，我建议您更改该箭头的位置并将其放置在上方。