Исправление 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

Разобрался, как это сделать, используя 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>

Answer 2

Если 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 (например, в реакции это делается легко используя ссылки).

Answer 3

Я только что попытался решить, может, мне нужна помощь

Answer 4

Класс A нуждается в положении: относительное и класс B положение: фиксированное

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

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

Пример

Answer 5

@ Мухаммед Фейсал прав. Вам нужно набрать position: fixed для дочернего элемента.

Вот рабочий код: https://codesandbox.io/s/restless-frost-6lu3y