Materialize CSSマテリアルボックスのZ-インデックスがMuuriグリッドと一緒に使用されても機能しない

Question

Material BoxからMaterializeとMuuriのグリッドアイテムを使用すると、最大のマテリアルボックスはマテリアルボックスのz -indexが高く設定されています。

ここに私のプランカの例https://plnkr.co/edit/aM2427AEwuWIqV3N9GvE/があります。

この例では、3つのボックスをクリックすると動作するように見えますが、1つまたは2つのボックスをクリックすると、他のボックスが重なっていることがわかります。ここで

は、CSSです：

.grid { 
    position: relative; 
} 

.item { 
    display: block; 
    position: absolute; 
} 

.item-content { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

は、ここにHTMLです：

<div class="grid"> 
    <div class="item"> 
    <div class="item-content"> 
     <img class="materialboxed" src="https://via.placeholder.com/270x350/ffab91/?text=one" /> 
    </div> 
    </div> 
    <div class="item"> 
    <div class="item-content"> 
     <img class="materialboxed" src="https://via.placeholder.com/270x350/90caf9?text=two" /> 
    </div> 
    </div> 
    <div class="item"> 
    <div class="item-content"> 
     <img class="materialboxed" src="https://via.placeholder.com/270x350/80cbc4/?text=three" /> 
    </div> 
    </div> 
</div> 

は、ここではJavaScriptです：

$(function() { 
    var grid = new Muuri('.grid'); 
}); 

Answer 1

私はちょうどあなたのコードから新しい例を作成し、それが正常に動作しています。これが助けてくれることを願って！

HTML

<div class="grid"> 

    <div class="item"> 
     <div class="item-content"> 
     <img class="materialboxed" src="https://via.placeholder.com/270x350/ffab91/?text=one" /> 
     </div> 
    </div> 

    <div class="item"> 
     <div class="item-content"> 
     <img class="materialboxed" src="https://via.placeholder.com/270x350/90caf9?text=two" /> 
     </div> 
    </div> 

    <div class="item"> 
     <div class="item-content"> 
     <img class="materialboxed" src="https://via.placeholder.com/270x350/80cbc4/?text=three" /> 
     </div> 
    </div> 

    </div> 

CSS

body { 
    font-family: Arial, Helvetica, sans-serif; 
    background: #fcfaf9; 
} 

.grid { 
    position: relative; 
} 

.item { 
    display: block; 
    position: absolute; 
    height: 200px; 
    width: 200px; 
    line-height: 200px; 
    margin: 5px; 
    text-align: center; 
    z-index: 1; 
} 

.item.muuri-item-dragging { 
    z-index: 3; 
} 

.item.muuri-item-releasing { 
    z-index: 2; 
} 

.item.muuri-item-hidden { 
    z-index: 0; 
} 

.item-content { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    cursor: pointer; 
    color: #fff; 
    background: #59687d; 
    font-size: 40px; 
    text-align: center; 
} 

.item.muuri-item-dragging .item-content { 
    background: #8993a2; 
} 

.item.muuri-item-releasing .item-content { 
    background: #152c43; 
} 

：ここ

はその一例 MUURI EXAMPLE

コードへのリンクですJS

const grid = new Muuri(".grid", { 
    dragEnabled: true 
    // dragAxis: 'y' 
});