steve Kim steve Kim - 4 months ago 23
jQuery Question

How to position an element relative to the screen (viewport)?

So, I have a button that is located at the bottom right corner of a page as shown in the picture ("current"):

enter image description here

The set up is pretty simple:

<div class="content">
Content
</div>
<div class="button" style="position:absolute;right:0px;bottom:0px;">
Button
</div>


Now, is there a way to locate the button at the bottom of "visible" screen and not necessary at the bottom of the content as shown on "need" picture?

Thanks!

Answer

I believe you are looking for position: fixed.

#myDiv
{
    position: fixed;
    bottom: 5px;
    right: 5px;
}

JSFiddle