css transform3d和堆棧順序

我使用isotope來佈局一些項目。每個項目都包含一個彈出菜單。因爲同位素使用translate3d爲了佈局和動畫化項目，菜單的堆疊順序我們都搞砸了。後面的項目會隱藏前一個項目的菜單，即使項目有z-index: 1和菜單有z-index: 2。有什麼辦法可以解決這個問題嗎？css transform3d和堆棧順序

這裏是顯示的行爲（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>

來源

2012-11-16 panzi

看起來每個.item具有相同的z-index，所以每個後續.item正在堆疊在以前的頂部，儘管有相同的z-index.該paren t z-index然後被比較，而不是.menu上的z-index。

我不熟悉的同位素，所以這可能不是一個可行的解決方案，但如果你能添加一些jQuery的，你可以動態後設置z-index值並且用類似

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

解決問題

這裏是一個小提琴http://jsfiddle.net/paskQ/4/

讓我知道，如果不工作，也許我能找到一個替代的解決方案，或者如果您有任何疑問。

來源

2012-11-16 18:44:56 gotohales

沒有那麼不可行。我還使用infiniscroll，在向下滾動頁面時添加越來越多的項目。但你給了我一個想法，這種風格解決了它：'.item：hover {z-index：2; }見：http://jsfiddle.net/paskQ/5/ – panzi

就在那裏，你走了。只要它工作:) – gotohales

我剛剛知道如何解決它。我只是說這種風格：

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

這樣，目前懸停的產品總是在所有的其他人面前。

參見：http://jsfiddle.net/paskQ/5/

來源

2012-11-16 18:52:23 panzi

css transform3d和堆棧順序

回答

相關問題