父元素未设置position时，absolute元素为何定位至cube容器左上角？

我知道设置position: absolute的元素会脱离正常文档流，定位到最近的已定位（position值不为static）祖先元素，或者初始包含块。但在下面的代码中，类为face bottom的div却定位在其容器cube的左上角，而cube和container这两个祖先元素都没设置position属性。请问这个元素是相对于哪个已定位元素进行绝对定位的？如果是相对于初始包含块（我觉得不是），那初始包含块具体指什么？

HTML代码 #

<body>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="container">
                        <div class="cube">
                            <div class="face bottom">6</div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>

CSS代码 #

* {
    box-sizing: border-box;
}

/* Define the container div, the cube div, and a generic face */
.container {
  width: 200px;
  height: 200px;
  margin: 75px 0 0 75px;
  border: 3px solid black;
}

.cube {
  width: 100%;
  height: 100%;
  border:3px dashed red;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
}

th,
p,
td {
  background-color: #eeeeee;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
}

这个face bottom元素其实是相对于初始包含块定位的，只是视觉上和cube的左上角重合，原因拆解如下：

• 首先明确规则：当绝对定位元素没有任何position值不为static的祖先，也没有设置了transform/perspective/filter（值不为none）的祖先时，就会相对于初始包含块定位。在浏览器环境中，初始包含块指的是对应视口的包含块，它的原点是浏览器可视区域的左上角，尺寸等于可视窗口的大小。
• 视觉重合的原因：
  绝对定位元素如果没有设置top/right/bottom/left属性，会保留它在正常文档流中的位置（只是脱离文档流，不再占据空间）。这个face元素在正常文档流中是cube的第一个子元素，位置本来就在cube的左上角；设为绝对定位后，它相对于初始包含块的坐标和原文档流位置完全一致，所以看起来像是参照cube定位，但本质还是以初始包含块为基准。

内容的提问来源于stack exchange，提问作者PineapplePie