Materialize CSS Material Box Z-Index funktioniert nicht, wenn mit Muuri Grid verwendet

Question

Wenn ich Material Box von Materialize zusammen mit Muuri Grid-Elemente verwenden, wird die maximierte Material Box immer noch hinter den folgenden Muuri-Grid-Elemente angezeigt, obwohl die Material Box z -Index ist hoch gesetzt.

Hier ist mein Fallbeispiel https://plnkr.co/edit/aM2427AEwuWIqV3N9GvE/.

In dem Beispiel, wenn Sie auf das dritte Feld klicken, scheint es zu funktionieren, aber wenn Sie auf die Felder eins und zwei klicken, werden Sie sehen, dass die anderen Felder immer noch überlappen.

Hier ist die CSS:

.grid { 
    position: relative; 
} 

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

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

Hier ist der 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> 

Hier ist das JavaScript:

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

Answer 1

ich ein neues Beispiel aus dem Code gerade erstellt haben und es funktioniert gut . Hoffe das wird helfen!

hier ist der Link zu diesem Beispiel MUURI EXAMPLE

Code:

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; 
} 

JS

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