在窗口右下角放置一個元素（不是視口）

Question

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

我該如何解決這個問題？

我在我的窗口加載函數下面的代碼：

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

看來我想的this相反，但使用位置：固定並沒有解決我的問題（我看到有相同的行爲固定和絕對）。

Answer 1

你想position: absolute，但該元素應該是身體標記的直接孩子，以便它相對於身體絕對定位。您也可能需要在車身標籤上放置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>