Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Keep div in position after user scrolls page

#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

like image 601
user852974 Avatar asked Aug 02 '11 20:08

user852974


People also ask

How do you get a div to stay at the bottom of the page?

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.

How do you make a div always visible on scrolling?

You need to put position: fixed; on the div element. That will anchor it to the viewport.

Which position will keep the element in the same place regardless of scrolling?

An element with position:fixed is fixed with respect to the viewport. It stays where it is, even if the document is scrolled.


1 Answers

position: fixed;

This should do it

like image 64
Warface Avatar answered Oct 06 '22 00:10

Warface