Javascript 正在修复另一个可滚动div右上角的div

我需要修复另一个div右上角的一个div。父div将使用新内容更新，并且可以滚动

我试着按照给出的一些答案进行操作，并进行了一些调整，但当我滚动父div时，它总是会从视图中消失。如何确保它保持在那里

这是我最接近我所需要的。但是如果我滚动父div，它就会从视图中消失

.A{
位置：绝对位置；
高度：130像素；
溢出：自动；
}
.B{
位置：绝对位置；
右：2px；
顶部：2个；
}

一些文本
其他一些文本

我刚试着解决了问题，梅得到了一些帮助

<div class="parent">
    <div class="A">
        <b>SOME TEXT</b>
    </div>
    <div class="B">
      <b>SOME OTHER TEXT</b>
    </div>
</div>

.A {
  position: absolute;
  width:100%;
  height: 530px;
}

.B {
  position: sticky;
  top: 0px;
}
.parent{
    height: 200px;
    overflow: auto;
    position: relative;
    display: flex;
    justify-content: flex-end;
}

一些文本
其他一些文本
.A{
位置：绝对位置；
宽度：100%；
高度：530px；
}
.B{
位置：粘性；
顶部：0px；
}
.家长{
高度：200px；
溢出：自动；
位置：相对位置；
显示器：flex；
证明内容：柔性端；
}

A类需要位置：相对，B类位置：固定

.A {
  position: relative;
  height: 130px;
  overflow: auto;
}

.B {
  position: fixed;
  right: 2px;
  top: 2px;
}

---

如果javascript是一个选项，您可以调整布局和样式，如：

<div>
    <div className="A">
        <b>SOME TEXT</b>
        <div className="B">
           <div className="C">
             <b>SOME OTHER TEXT</b>
           </div>
        </div>
    </div>
</div>


.A {
  position: absolute;
  height: 130px;
  overflow: auto;
}

.B {
  position: absolute;
  right: 2px;
  top: 2px;
  height: {_ => _.elementAScrollHeight};
}
.C {
  position: sticky;
  top: 0;
}

一些文本
其他一些文本
.A{
位置：绝对位置；
高度：130像素；
溢出：自动；
}
.B{
位置：绝对位置；
右：2px；
顶部：2个；
高度：{{u=>{u0.elementAScrollHeight}；
}
C{
位置：粘性；
排名：0；
}

---

其中elementAScrollHeight scroll height是JS获取的滚动高度（例如，在react中，使用refs可以轻松完成该操作）。

找到了一种方法，使用z-index：

.A{
位置：绝对位置；
排名：0；
左：0；
高度：130像素；
溢出：自动；
}
.B{
z指数：2；
位置：绝对位置；
右：2px；
顶部：2个；
}

一些文本
其他一些文本

我想你需要的是

位置：固定的

而不是

位置：绝对的

@MohammadFaisal，通过这样做，子div只会移到底部，滚动问题仍然存在。请分享你代码输出的屏幕截图。位置：B类的固定的就可以了。你的问题太不清楚了。你父母的部门是什么？你想把哪一部分粘在上面？哪一部分是可滚动的？这将帮助您创建滚动并固定到顶部，即使这是块只是应用程序的一部分。使用“位置固定”是相对于整个屏幕的。您的解决方案与z索引无关，因为您的div

.B

不再位于具有绝对位置的

.A

中，而是位于具有静态位置的

.parent

中。