与Muuri Grid一起使用时，Materialize CSS Material Box z-index不起作用

Question

When I use Material Box from Materialize along with Muuri grid items, the maximized Material Box will still display behind the subsequent Muuri grid items even though the Material Box's z-index is set high.

Here's my plunker example https://plnkr.co/edit/aM2427AEwuWIqV3N9GvE/ .

In the example, if you click on box three it appears to work, but if you click on boxes one and two you will see that they will still have the other boxes overlapping them.

Here's the CSS:

.grid {
  position: relative;
}

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

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

Here's the 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>

Here's the JavaScript:

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

Answer 1

I just created a new example from your code and it's working fine. Hope this will help!

here is the link to that example 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'
});