Question

我使用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/

Answer 2

看起来每个.item都有相同的z-index，因此每个后续的.item都会堆叠在前一个z-index.之上，尽管z-index父亲z-index然后是{1}}，而不是.menu上的z-index。

我不熟悉同位素，所以这可能不是一个可行的解决方案，但是如果你能够添加一些jQuery，你可以动态设置var total = $(".item").length; $(".item").each(function(){ $(this).css("z-index", total); total--; });值并修复问题

{{1}}

这是一个小提琴http://jsfiddle.net/paskQ/4/

如果这不起作用，请告诉我，也许我可以找到替代解决方案，或者如果您有任何问题。

css transform3d和堆叠顺序

2 个答案: