transform & fixed

transform元素影响fixed元素

HTML

<div id="container-normal">
  <div class="fixed-to-viewport">这个fixed元素会相对于viewport进行定位</div>
</div>

<div id="container-transform">
  <div class="fixed-to-container"></div>
  <p class="text">
  这是测试文字,你会发现此时fixed元素已经不是我们认识的fixed元素了，这些文字不再穿过fix元素，fixed元素会随着滚动条滚动而滚动。那如果我们既需要fixed元素不相对于viewport定位，又能有fixed元素原本的作用呢？该怎么办？
  </p>
</div>

CSS

#container-normal{
  width: 100px;
  height: 200px;
  border: 1px solid #000;
}
.fixed-to-viewport{
  width: 100px;
  height: 100px;
  border: 1px solid #999;
  position: fixed;
  top: 0px;
  left: 50px;
  overflow: scroll;
}
#container-transform{
/*   position: absolute;
  right:0px;
  top:0px; */
  width: 100px;
  height: 200px;
  border: 1px solid #000;
  transform: scale(1);
  overflow: scroll;
}
.fixed-to-container{
  width: 100px;
  height: 50px;
  border: 1px solid #999;
  position: fixed;
  top: 0px;
  left: 0px;
}
.text{
  padding-top: 50px;
}