#div1 {
background: #ffffff;
padding: 6px;
color:#333;
font:normal 10px Arial, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
position: absolute;
bottom: 20px;
right: 20px;
}
This div maintains a position 20x20 px from the bottom right corner of the page. But my site contains an "endless page" pagination feature and when scroll bars appear on the browser window because the content increases, the div does not maintain its position in the bottom right hand corner but rather moves up the page. How can I get this div to stay in the bottom right corner even when the user scrolls or when scroll bars appear? Thanks
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
You need to put position: fixed; on the div element. That will anchor it to the viewport.
An element with position:fixed is fixed with respect to the viewport. It stays where it is, even if the document is scrolled.
position: fixed;
This should do it
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With