为什么position：fixed div受其容器的transform属性影响？

Question

.fixed{position:fixed;top:0;left:0;right:50%;background:#eee}
.tran{width:70%;background:red;transform:translateZ(0)}
img{display:block}
<div class="tran">
  <div class="fixed">
    something    something    somethingsomething    something    somethingsomething    something    somethingsomething    something    somethingsomething    something    somethingsomething    something    somethingsomething    something    something
  </div>
  <img src="https://via.placeholder.com/380x250">
</div>

在这里拨弄：https://jsfiddle.net/8sv1cp4y/

在上面的代码中，.fixed div是相对于其容器而不是视口的。那是因为transform:translateZ(0)，如果您删除此样式，则div将相对于视口，就像我希望固定div那样。

这是为什么？变换必须做些什么位置属性？