Html 为什么显示表格单元格的嵌套元素显示在较高的外部元素上？

我有一个嵌套在

z-index:0

元素中的元素，它位于

z-index:1

元素下面。父元素*正确地**显示在另一个元素下。但是，当我使子元素

显示时：table cell；z-index:2

它从父元素（在垂直z轴上）跳出，位于更高的外部元素上方！为什么会发生这种情况？我如何阻止它

示例：
父项为显示的示例：表，同一问题：

HTML:

---

这与元素具有

表格单元格的
显示
这一事实完全无关

这是因为
.container
元素实际上不是。尽管
.container
元素是相对定位的，但它仍然有一个默认的
z-index
，即
auto
，而不是
0

如果要建立堆叠上下文，并防止子元素出现在上一个同级之上，请添加
z-index:0
。否则，
.tc
将继续出现在
上方。悬停
，因为
2
的
z指数明显高于
1


还需要注意的是，
display:table cell与此处的堆叠无关。删除它并保留
z-index
属性的工作原理是一样的：。与您相比，这就是问题所在！我忘了给容器一个z索引。
<div class="hover">
HOVER IN HERE
</div>
<div class="container">
  <div class="tc">
    This should be under
  </div>
</div>

.hover
{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
  background-color: #e8e8e8;
  z-index: 1;
}

.container
{
  position: relative;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background-color: red;
}

.tc
{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  background-color: blue;
  display: table-cell;
  z-index: 2;
}

.container {
  position: relative;
  z-index: 0;

  /* .. */
}