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

Question

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

我尝试按照有关如何将最后一个 div 放入父 div 的右上角的一些答案进行操作？ (css)并播放了一点，但是当我滚动父 div 时它总是滚动到视图之外。 我怎样才能确保它留在那里？

这是我最接近我需要的。 但是，如果我滚动父 div，它就会滚出视图。

 .A { position: absolute; height: 130px; overflow: auto; } .B { position: absolute; right: 2px; top: 2px; }

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

Answer 1

我只是试图解决可能会得到一些帮助

<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;
}

Answer 2

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

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

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

例子

Answer 3

如果 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;
}

其中 elementAScrollHeight 滚动高度是 JS 获取的滚动高度（例如，在反应中，它可以使用 refs 轻松完成）。

Answer 4

想出一种方法来做到这一点，使用 z-index：

 .A { position: absolute; top: 0; left: 0; height: 130px; overflow: auto; } .B { z-index: 2; position: absolute; right: 2px; top: 2px; }

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