html - css transform3d 和堆叠顺序

Question

我使用 isotope布置一些元素。每个元素都包含一个弹出菜单。因为 isotope 使用 translate3d 来对元素进行布局和动画处理，所以菜单的堆叠顺序我们都搞砸了。后面的元素隐藏了前面的菜单，即使这些元素有 z-index: 1 并且菜单有 z-index: 2。有什么办法可以解决吗？

这是一个显示行为的示例 (jsfiddle):

CSS:

.items {
    position: relative;
}

.item {
    position: absolute;
    z-index: 1;
    width: 90px;
    height: 90px;
    background: lightgray;
    padding: 5px;
}

.menubutton {
    position: relative;
}

.menu {
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 0px;
    list-style: none;
    margin: 0;
    padding: 5px;
    background: yellow;
}

.menubutton .menu {
    display: none;
}

.menubutton:hover .menu {
    display: block;
}

HTML:

<div class="items">
<div class="item" style="-webkit-transform: translate3d(10px,10px,0px); transform: translate3d(10px,10px,0px);">
<div class="menubutton">
    <div class="label">menu</div>
    <ul class="menu">
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>                    
    </ul>
</div>
    ...
</div>
<div class="item" style="-webkit-transform: translate3d(10px,120px,0px); transform: translate3d(10px,120px,0px);">
<div class="menubutton">
    <div class="label">menu</div>
    <ul class="menu">
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>                    
    </ul>
</div>
    ...
</div>
</div>

Answer 1

我刚刚知道如何解决它。我刚刚添加了这种样式:

.item:hover {
    z-index: 2;
}

这样当前悬停的元素总是在所有其他元素的前面。

参见:http://jsfiddle.net/paskQ/5/