Materialize CSS 재질 상자 Z- 인덱스가 Muuri Grid와 함께 사용할 때 작동하지 않습니다.

Question

Material BoxMaterialize에서 Muuri 격자 항목까지 사용하면 최대화 된 재질 상자는 Material 상자의 z -index가 높게 설정되었습니다.

내 초라한 예가 https://plnkr.co/edit/aM2427AEwuWIqV3N9GvE/입니다.

예에서 상자 3을 클릭하면 작동하는 것처럼 보이지만 상자 1과 2를 클릭하면 상자에 다른 상자가 겹쳐져있는 것을 볼 수 있습니다. 여기에 자바 스크립트의

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

: 난 그냥 코드에서 새로운 예제를 만들어

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

Answer 1

하고 잘 작동 년대 HTML 여기

.grid { 
    position: relative; 
} 

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

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

것 : 여기

는 CSS의 . 희망이 도움이 될 것입니다!

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