I am trying to create a div with position: sticky within another div and make it stick to the bottom right corner of the screen when the parent div is on-screen. However, using right: 0 in the CSS doesn't seem to have any effect. When I use left: 100%, it works but causes issues when the screen size is too small because the div ends up positioned relative to the screen rather than the parent div, resulting in the sticky element being left behind as the user scrolls to the right. What I want is for the div to remain in the bottom right corner of the screen until it goes off-screen.
Below is the CSS & HTML code snippet:
div.text {
width: 100%;
}
div.data {
min-width: 1000px;
}
div.sticky {
position: sticky;
width: 50px;
height: 50px;
bottom: 0;
left: 90%;
background-color: red;
padding: 50px;
font-size: 20px;
}<!DOCTYPE html>
<html>
<body>
<div class="text">
<div class="data">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
...
...
...
<br><br>
</div>
<div class="sticky">Sticky</div>
<br><br>
</div>
</body>
</html>