Html 位置已修复，无法在溢出隐藏父级中工作

我有一个div是绝对的，有固定的

宽度

和

高度

，我为滚动条添加了溢出自动。在这种情况下，它有3个子元素，其中一个是

位置：fixed

，但当我滚动fixed元素时，我不确定我做错了什么

<div class="parent">

<div class="child-1">
    <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1>
</div>

<div class="child-2">
    <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1>
</div>

<div class="child-3">
    <h1>I am fixed.</h1>
</div>

---

它是固定的，它只是固定在父元素上，您可以滚动它

<div class="parent">
  <div class="sub-parent">
    <div class="child-1">
          <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1>
      </div>

     <div class="child-2">
       <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1>
     </div>
  </div>
    <div class="child-3">
        <h1>I am fixed.</h1>
    </div>

</div>


.parent {
  position: relative;
}
.sub-parent {
    position: absolute;
    width: 320px;
    right: 0;
    top: 0;
  height: 250px;
  overflow: auto;
    bottom: 0;
    background: yellow;
    z-index: 1;
}

.parent .child-3 {
    position: fixed;
    right: 0;
    top: 5px;
    color: red;
  z-index: 10
}

一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本
一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本
我已经修好了。
.家长{
位置：相对位置；
}
.子父母{
位置：绝对位置；
宽度：320px；
右：0；
排名：0；
高度：250px；
溢出：自动；
底部：0；
背景：黄色；
z指数：1；
}
.父母，孩子-3{
位置：固定；
右：0；
顶部：5px；
颜色：红色；
z指数：10
}

---

希望这对你有用。

这是一个工作示例，请发布你的代码。我在这个链接中有代码，@Saurav Jamwal我在这里添加了代码…好的，让我检查一下，谢谢你的代码在chrome中也对我有用，但我不确定为什么我的代码在chrome中不起作用，在firefox和edge中也能正常工作，对不起，对此我一无所知。那超出了我的工资等级。如果我没有选择把固定元素放在父母之外怎么办？如果它在父母之外，问题实际上会变得更容易。只要它在position:absolute元素之外。如果它不在absolute div之外，有什么办法吗？

<div class="parent">
  <div class="sub-parent">
    <div class="child-1">
          <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1>
      </div>

     <div class="child-2">
       <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1>
     </div>
  </div>
    <div class="child-3">
        <h1>I am fixed.</h1>
    </div>

</div>


.parent {
  position: relative;
}
.sub-parent {
    position: absolute;
    width: 320px;
    right: 0;
    top: 0;
  height: 250px;
  overflow: auto;
    bottom: 0;
    background: yellow;
    z-index: 1;
}

.parent .child-3 {
    position: fixed;
    right: 0;
    top: 5px;
    color: red;
  z-index: 10
}