Stacking divs onto another (with clip-path, :before pseudoclass)

Question

I can't get the existing approaches to stack divs to work in my somewhat complicated example.

Simple nesting of <div class:"background"><div class:"foreground></div></div> (pseudocode) won't work, perhaps because my parent (background) div:

• has a pseudo-element :before which sets the padding?
• uses clip-path?
• I am being really, really dense (most likely scenario).

I'm quite happy with the below hexagon grid (from here), which I think is quite elegant. I'm aware that this works only on Safari and Chrome for the time being.

The design consists of solid white items, and a grid of transparent cells, both of which have the same hexagon shape. (Eventually the items will be dragged onto the cells). Notice that I use a .hexagon class which merely describes the geometrical form. It is then always assigned assigned together with either the (solid white) .item or the (transparent) .cell.

I would now like to stack a bunch of .item-classed divs onto a particular .cell-classed div, without changing the flow of the cells. The nesting approach I took doesn't seem to work.

Here's the complete code.

.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;
  }

<div class="grid">
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell">
      <span class="textstyle">
          I am ZAP and I want foo and bar on top of me.
      </span>

      <!-- this is where foo and bar should go, but the below doesn't work. -->
      <div class="hexagon item">
        <span class="textstyle">
            I am BAR, and I want to be on top of ZAP.
            This is where I WANT to be.
        </span>
      </div>
      <div class="hexagon item">
        <span class="textstyle">
            I am FOO, and I want to be on top of ZAP.
            This is where I WANT to be.
        </span>
      </div>
    </div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>
    <div class="hexagon cell"></div>

    <!-- the below are obviously in the wrong place they should go UP -->
    <div class="hexagon item">
      <span class="textstyle">
          I am BAR, and I want to be on top of ZAP.
      </span>
    </div>
    <div class="hexagon item">
      <span class="textstyle">
          I am BAR, and I want to be on top of ZAP.
      </span>
    </div>
  </div>