I have all elements positioned absolutely on my page. Some are at the top and some are at the bottom. However, when I add an additional element to display news text in the center of the page, it gets hidden under the element aligned at the bottom. When I scroll, the bottom element stays in place while the middle one continues to move downwards. What I actually want is for the bottom element to always stay stuck to the bottom when the page is scrollable.
.top-element {
position: absolute;
top: 0;
left: 0;
}
.middle-element {
position: absolute;
top: 300px;
left: 0;
}
.bottom-element {
position: absolute;
bottom: 0;
left: 0;
}<div class="top-element">MUCH TEXT IS HERE</div>
<div class="middle-element">MUCH TEXT IS HERE</div>
<div class="bottom-element">MUCH TEXT IS HERE</div>If the content height of the middle element is greater than the window size, the bottom element will remain in the same position.