How to fix a div relative to the parent div on scroll - css

Question

I'm trying to position a div to the bottom right of the parent div. As shown in the image.
The parent div is filled with text so I have used the overflow-y property on the parent.
But when I tried to scroll the parent div, the child container started scrolling with it. I'm expecting the bottom container stay as it is at bottom right even on scroll.
Attatching the codesandbox link: https://codesandbox.io/s/relaxed-night-g96xce?file=/index.html
Code:
.text {
color: white;
font-size: 15px;
text-align: right;
}
.usage_body {
border: 1px solid #000;
width: 300px;
height: 300px;
padding: 10px;
overflow-y: scroll;
position: relative;
}
.chart-wrapper__graphLabel {
position: absolute;
bottom: 0;
right: 0;
width: 300px;
height: 30px;
background-color: #00f;
}
<div class="usage_body">
<div class="chart-wrapper">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas tempora nisi vitae tempore at voluptate similique recusandae? Modi quas qui nesciunt libero, autem, est officia ducimus nobis velit cum asperiores saepe, facilis nam corrupti ad eaque
laudantium provident nihil magnam. Delectus facere iure distinctio officiis, fuga rem molestiae magnam quam iusto enim. Repellat minima at, nostrum placeat consequuntur iusto quaerat molestias, pariatur aut odio, maiores cumque? Porro a sed nulla
architecto consequatur maxime praesentium asperiores ea, quasi enim veniam exercitationem neque necessitatibus, libero nemo modi, aspernatur ex sapiente quod. Nihil similique cum nobis quibusdam unde itaque et accusantium impedit. Veniam, illum! Eum
dolorum suscipit molestiae nihil officia nostrum deserunt laborum hic perferendis dolores asperiores illo perspiciatis, nemo tenetur harum recusandae explicabo quis ipsum amet ipsam vel fugiat assumenda eaque quia. Fugiat asperiores fugit voluptatum
aspernatur, animi facilis eos. Quod laudantium sunt eaque recusandae porro debitis consectetur nemo in placeat unde praesentium, obcaecati esse deserunt. Voluptate sit, ullam veniam doloribus optio blanditiis magni vero tempora sapiente! Explicabo
molestiae vel distinctio inventore, repellendus est mollitia tempora quae. Eius animi quisquam tenetur? Dolores placeat dolore sed nobis laboriosam. Dolore, unde! Recusandae amet natus odio totam cumque magnam unde mollitia pariatur iusto expedita.
Est?
</div>
<div class="chart-wrapper__graphLabel">
<p class="text">
position me
</p>
</div>
</div>

Answer 1

You can use position:sticky as per the comments but the padding is also applied to the sticky element so you also have to set the padding-bottom to 0 or use translate to fix it to the very bottom of the frame like this.
Padding-bottom
.text {
color: white;
font-size: 15px;
text-align: right;
margin:0;
}
.usage_body {
border: 1px solid #000;
width: 300px;
height: 300px;
padding: 10px;
padding-bottom:0;
overflow-y: scroll;
position: relative;
}
.chart-wrapper__graphLabel {
position: sticky;
bottom: 0;
right: 0;
width: 300px;
height: 30px;
background-color: #00f;
}
<div class="usage_body">
<div class="chart-wrapper">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas tempora nisi vitae tempore at voluptate similique recusandae? Modi quas qui nesciunt libero, autem, est officia ducimus nobis velit cum asperiores saepe, facilis nam corrupti ad eaque
laudantium provident nihil magnam. Delectus facere iure distinctio officiis, fuga rem molestiae magnam quam iusto enim. Repellat minima at, nostrum placeat consequuntur iusto quaerat molestias, pariatur aut odio, maiores cumque? Porro a sed nulla
architecto consequatur maxime praesentium asperiores ea, quasi enim veniam exercitationem neque necessitatibus, libero nemo modi, aspernatur ex sapiente quod. Nihil similique cum nobis quibusdam unde itaque et accusantium impedit. Veniam, illum! Eum
dolorum suscipit molestiae nihil officia nostrum deserunt laborum hic perferendis dolores asperiores illo perspiciatis, nemo tenetur harum recusandae explicabo quis ipsum amet ipsam vel fugiat assumenda eaque quia. Fugiat asperiores fugit voluptatum
aspernatur, animi facilis eos. Quod laudantium sunt eaque recusandae porro debitis consectetur nemo in placeat unde praesentium, obcaecati esse deserunt. Voluptate sit, ullam veniam doloribus optio blanditiis magni vero tempora sapiente! Explicabo
molestiae vel distinctio inventore, repellendus est mollitia tempora quae. Eius animi quisquam tenetur? Dolores placeat dolore sed nobis laboriosam. Dolore, unde! Recusandae amet natus odio totam cumque magnam unde mollitia pariatur iusto expedita.
Est?
</div>
<div class="chart-wrapper__graphLabel">
<p class="text">
position me
</p>
</div>
</div>
Translate with css variable
.text {
color: white;
font-size: 15px;
text-align: right;
margin:0;
}
.usage_body {
--padding: 10px;
border: 1px solid #000;
width: 300px;
height: 300px;
padding: var(--padding);
overflow-y: scroll;
position: relative;
}
.chart-wrapper__graphLabel {
position: sticky;
bottom: 0;
right: 0;
width: 300px;
height: 30px;
transform:translateY(var(--padding));
background-color: #00f;
}
<div class="usage_body">
<div class="chart-wrapper">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas tempora nisi vitae tempore at voluptate similique recusandae? Modi quas qui nesciunt libero, autem, est officia ducimus nobis velit cum asperiores saepe, facilis nam corrupti ad eaque
laudantium provident nihil magnam. Delectus facere iure distinctio officiis, fuga rem molestiae magnam quam iusto enim. Repellat minima at, nostrum placeat consequuntur iusto quaerat molestias, pariatur aut odio, maiores cumque? Porro a sed nulla
architecto consequatur maxime praesentium asperiores ea, quasi enim veniam exercitationem neque necessitatibus, libero nemo modi, aspernatur ex sapiente quod. Nihil similique cum nobis quibusdam unde itaque et accusantium impedit. Veniam, illum! Eum
dolorum suscipit molestiae nihil officia nostrum deserunt laborum hic perferendis dolores asperiores illo perspiciatis, nemo tenetur harum recusandae explicabo quis ipsum amet ipsam vel fugiat assumenda eaque quia. Fugiat asperiores fugit voluptatum
aspernatur, animi facilis eos. Quod laudantium sunt eaque recusandae porro debitis consectetur nemo in placeat unde praesentium, obcaecati esse deserunt. Voluptate sit, ullam veniam doloribus optio blanditiis magni vero tempora sapiente! Explicabo
molestiae vel distinctio inventore, repellendus est mollitia tempora quae. Eius animi quisquam tenetur? Dolores placeat dolore sed nobis laboriosam. Dolore, unde! Recusandae amet natus odio totam cumque magnam unde mollitia pariatur iusto expedita.
Est?
</div>
<div class="chart-wrapper__graphLabel">
<p class="text">
position me
</p>
</div>
</div>
Using margin on the child element
Possibly a more straightforward approach would be to apply a margin to the content div then you can just position the footer right where you want it
.text {
color: white;
font-size: 15px;
text-align: right;
margin:0;
}
.usage_body {
border: 1px solid #000;
width: 300px;
height: 300px;
overflow-y: scroll;
position: relative;
}
.chart-wrapper {
margin:10px;
}
.chart-wrapper__graphLabel {
--left-margin: 10px;
position: sticky;
bottom: 0;
/* note, setting right:0 does not appear to work on widths less than 100% so used left:0 and transform:translateX instead */
left: 0;
width: calc(100% - var(--left-margin));
height: 30px;
transform: translateX(var(--left-margin));
background-color: #00f;
}
<div class="usage_body">
<div class="chart-wrapper">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas tempora nisi vitae tempore at voluptate similique recusandae? Modi quas qui nesciunt libero, autem, est officia ducimus nobis velit cum asperiores saepe, facilis nam corrupti ad eaque
laudantium provident nihil magnam. Delectus facere iure distinctio officiis, fuga rem molestiae magnam quam iusto enim. Repellat minima at, nostrum placeat consequuntur iusto quaerat molestias, pariatur aut odio, maiores cumque? Porro a sed nulla
architecto consequatur maxime praesentium asperiores ea, quasi enim veniam exercitationem neque necessitatibus, libero nemo modi, aspernatur ex sapiente quod. Nihil similique cum nobis quibusdam unde itaque et accusantium impedit. Veniam, illum! Eum
dolorum suscipit molestiae nihil officia nostrum deserunt laborum hic perferendis dolores asperiores illo perspiciatis, nemo tenetur harum recusandae explicabo quis ipsum amet ipsam vel fugiat assumenda eaque quia. Fugiat asperiores fugit voluptatum
aspernatur, animi facilis eos. Quod laudantium sunt eaque recusandae porro debitis consectetur nemo in placeat unde praesentium, obcaecati esse deserunt. Voluptate sit, ullam veniam doloribus optio blanditiis magni vero tempora sapiente! Explicabo
molestiae vel distinctio inventore, repellendus est mollitia tempora quae. Eius animi quisquam tenetur? Dolores placeat dolore sed nobis laboriosam. Dolore, unde! Recusandae amet natus odio totam cumque magnam unde mollitia pariatur iusto expedita.
Est?
</div>
<div class="chart-wrapper__graphLabel">
<p class="text">
position me
</p>
</div>
</div>