将div堆叠到另一个上（使用clip-path，：在伪类之前）

Question

我无法让existing approaches堆栈div在我有点复杂的例子中起作用。

--data-only（伪代码）的简单嵌套不会起作用，也许是因为我的父（背景）div：

• 有一个伪元素<div class:"background"><div class:"foreground></div></div>来设置填充？
• 使用:before？
• 我真的非常非常密集（最有可能的情况）。

我对下面的六边形网格（来自here）感到非常满意，我觉得这很优雅。 我知道仅适用于the time being的Safari和Chrome 。

该设计由纯白色项目和透明单元格网格组成，两者都具有相同的六边形形状。 （最终项将被拖到单元上）。 请注意，我使用的clip-path类仅描述几何形式。 然后始终将其分配为（纯白色）.hexagon或（透明）.item。

我现在想将一堆.cell - 分类的div 堆叠到特定的.item - 分类div上，而不改变单元格的流量。 我采用的嵌套方法似乎不起作用。

这是完整的代码。

＆＃13;

＆＃13;

.cell

＆＃13;

.grid {
    margin: 0 auto;
    /*horizontal centering*/
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: scroll;
    background: darkgrey;
  }

  .hexagon {
    width: calc(100% / 9.5 - 0.2%);
    overflow: hidden;
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    -webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background-color: white;
    float: left;
  }

  .hexagon:before {
    display: block;
    padding-top: 115.4700538379252%;
    /*this is 1/sqrt(3) * 2*/
    content: '';
    /*content field is necessary as per the spec*/
  }

  .cell {
    margin-top: -2.7%;
    /*TODO this still needs to be calculated programmatically*/
    margin-right: 0.1%;
    margin-left: 0.1%;
    opacity: 0.3;
    position: relative;
    z-index: 1;
  }

  .cell:nth-child(-n+9) {
    margin-top: 0.1%;
  }
  /*give first/last n items a top/bottom margin*/

  .cell:nth-last-child(-n+9) {
    margin-bottom: 0.1%;
  }
  /*give first/last n items a top/bottom margin*/

  .cell:nth-child(18n +1) {
    margin-left: calc(100% / 9.5 / 2 + 0.1%);
  }
  /*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

  .item {
    opacity: 1;
    position: absolute;
    z-index: 999;
    float: left;
  }

  .textstyle {
    color: black;
    font-family: sans-serif;
    top: 25%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    text-align: center;
    position: absolute;
    font-size: 1vw;
  }

＆＃13;

＆＃13;

＆＃13;