CSS Transform3D и порядок наложения

Question

Я использую изотоп для разметки некоторых предметов. Каждый пункт включает в себя всплывающее меню. Потому что изотоп использует 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 на .menu,

Я не знаком с изотопом, так что это не может быть жизнеспособным решением, но если вы можете добавить JQuery, вы можете динамически установить z-index значения после и исправить проблему с чем-то вроде

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

Вот скрипка http://jsfiddle.net/paskQ/4/

Дайте мне знать, если это не сработает, и, возможно, я найду альтернативное решение, или если у вас есть какие-либо вопросы.