修復另一個可滾動 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>