將元素放置在窗口（非視口）的右下角

Question

我正在使用javacript將元素放置在屏幕上的某個位置（在右下角）。 調整頁面大小時，我希望元素保留在右下角（視口之外）。 相反，我看到它移動到視口的右下角。

我怎樣才能解決這個問題？

我的窗口加載功能中包含以下代碼：

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

似乎我想要與此相反，但是使用position：fixed並不能解決我的問題（在固定和絕對狀態下，我看到相同的行為）。

Answer 1

您需要position: absolute ，但是元素應該是body標簽的直接子元素，以便相對於body絕對定位。 您可能還需要在body標簽上放置position: relative 。

 .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>