具体化 CSS 材质框 z-index 在与 Muuri 网格一起使用时不起作用

Question

当我将材料盒与Muuri网格项目一起使用时，最大化的材料盒仍将在随后的Muuri网格项目后面显示，即使材料盒的Z index设置了高。<<<<<<<<<<<<<<

这是我的plunker示例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');
});

Answer 1

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

这是该示例Muuri示例

的链接

代码：

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