样式问题：子div怎样固定在父div可观测地区的位置

Question

运行效果图
当前红色的小块不会一直固定在父div显示区域的头部，会随着父类的滚动消失不见。
我需要它能像fixed一样，一直在top，不受滚动影响。要求：不能用sticky。因为用来它之后会在页面中占一块位置。

<div style="position: relative;width: 300px;height: 400px;overflow-y: auto">
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <p>1</p>
      <div style="position: absolute;top:0;height: 40px;width: 40px;background: red">

      </div>
    </div>

补充：层级关系不能改，位置啥的也不能都。希望只用纯css实现效果！

Answer 1

外面再包一层
https://codepen.io/cuteyangya...

Answer 2

弄成背景 background-attachment: fixed; ？

Answer 3

不要设置top/left
https://jsbin.com/zikufofola/...,output