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

当我将Material Box中的Materialize与Muuri网格项一起使用时，即使将Material Box的z索引设置为较高，最大化的Material Box仍将显示在后续Muuri网格项的后面。

这是我的小例子https://plnkr.co/edit/aM2427AEwuWIqV3N9GvE/。

在示例中，如果单击第三个框，它似乎可以工作，但是如果您单击第一个框和第二个框，您将看到它们仍将其他框重叠。

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

最佳答案

我刚刚从您的代码创建了一个新示例，并且工作正常。希望这会有所帮助！

这是该示例MUURI EXAMPLE的链接

码：

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