0

我使用同位素来布置一些项目。每个项目都包含一个弹出菜单。因为同位素用于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>
4

2 回答 2

1

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

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

这样，当前悬停的项目总是在所有其他项目的前面。

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

于 2012-11-16T18:52:23.513 回答
0

看起来每个.item都有相同的z-index，所以每个后续.item都堆叠在前一个之上，尽管有相同z-index.的父z-index级然后是被比较的，而不是z-indexon .menu。

我不熟悉同位素，所以这可能不是一个可行的解决方案，但如果您能够添加一些 jQuery，您可以在z-index之后动态设置值并使用类似的方法解决问题

var total = $(".item").length;
$(".item").each(function(){
   $(this).css("z-index", total);
   total--;        
});

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

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

于 2012-11-16T18:44:56.543 回答