忽略父Div的变换的CSS解决方案

Question

我有这样的布局：

<div class="parent">
 <div class="wrapper">
  <div class="child">
  <h1>Sticky text</h1>
  </div>
 </div>
</div>

CSS：

.parent {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }

.wrapper {
  width: 1024px;
  display: block;
}

.child {
-webkit-transform: translateY(-80px);
-ms-transform: translateY(-80px);
 transform: translateY(-80px);
 transition: transform .5s ease;
 z-index: 31;
 position: fixed;
 left: 0;
 right: 0;
 top: 100%;
}

由于父母的transform为0，我的孩子不会保持固定。但是，如果我删除父transform，那么孩子就可以了。有没有办法解决？没有删除父母的transform？可能是flex？