由-webkit-transform破坏的元素的Z顺序：translateZ

Question

可以在某些元素上使用强制执行-webkit-transform: translateZ(20px);的硬件，而页面的其余部分具有普通z-index:10;

我发布了这个问题，因为我遇到了一些粘性侧面菜单问题，这些问题触发了Chrome上的一些渲染问题，因此补充了-webkit-transform: translateZ(20px);。虽然页面的其余部分仍然使用z-index，如here。例如，页脚应该被粘性侧菜单覆盖，同时滚动到底部，这用于工作（在translateZ之前），但现在页脚出现在顶部...

我尝试将translateZ(10px);添加到页脚并且div包装整个页面但没有成功，这显然不是我想要做的事情，因为我只拥有带侧边菜单的产品而不是页面的其余部分......也就是说页脚...

在this案例中：为什么页脚出现在红色框的顶部？