Fixing div in top right corner of another scrollable div

Question

I need to fix a div in the top-right corner of another div. The parent div gets updated with new content and is scrollable.

I tried following some of the answers given to how to place last div into right top corner of parent div? (css) and played around a little, but it always scrolls out of view when I scroll the parent div. How can I make sure it stays there?

This is the closest I've gotten to what I need. But it scrolls out of view if I scroll the parent 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

I just tried to solve may got some help

<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

Class A needs position :relative and Class B position : fixed

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

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

Example

Answer 3

If javascript is an option, you could adjust your layout and styles like:

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

Where elementAScrollHeight scroll height is the scroll height of gotten by JS (eg in react it's done easily using refs).

Answer 4

Figured out a way to do it, using 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>