Place an element in bottom right corner of window (not viewport)

Question

I'm using javacript to place an element in a certain position on the screen (in the bottom right corner). When I resize the page, I want the element to stay in the bottom right corner (outside the viewport). Instead, I'm seeing it move to be in the bottom-right corner of my viewport.

How can I fix this?

I have the following code in my window load function:

    $('MyElement').removeClass();
    $('MyElement').css("right", "20px");
    $('MyElement').css("bottom", "55px");
    $('MyElement').css("position", "fixed");

It seems I want the opposite of this , but using position:fixed did not fix my problem (I'm seeing the same behavior with both fixed and absolute).

Answer 1

You want position: absolute , but the element should be a direct child of the body tag so that it is positioned absolute relative to the body. You might need to put position: relative on the body tag as well.

 .thing { position: absolute; right: 20px; bottom: 55px; border: 1px solid red; } body { width: 150vw; height: 150vh; position: relative; } 

 <div class="thing">Hello!</div> 

 $(function(){ var op=$('.thing').offsetParent(); var t=op.offset().top; var l=op.offset().left; var w=op.width(); var h=op.height(); var dh=$(document).height(); var dw=$(document).width(); var newbottom=t+h-dh+55; var newright=l+w-dw+20; $('.thing').css('bottom',newbottom+'px').css('right',newright+'px'); }); 

 footer { position: absolute; width: 100%; background-color:green; height: 50px; } .thing { position: absolute; border: 1px solid red; } body { width: 150vw; height: 150vh; position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <footer> <div class="thing">Hello!</div> </footer>