修復DIV到右下角

Question

http://www.naomisalsi.com/

我已經使用HTML和身體屬性有一個漸變背景和花背景的上述網站。

我也使用過一個div，它有右下手的花。效果很好，但不是在滾動時。我如何獲得右下角的圖像以粘貼到屏幕底部？

Answer 1

你會想設置position: fixed;而不是position: absolute;。

Answer 2

您可能需要使用JavaScript來完成此任務。這些技巧會達到你想要的效果，但它們往往不是非常順暢的動畫。當滾動時，這種「卡住」的對象會傾向於跳過和結巴。我發現一個例子here，但沒有嘗試過自己。我建議尋找幾個例子，並嘗試一下看起來最乾淨和最現代的例子。

Answer 3

如果你把花放在一個div裏，並且它的位置絕對是最低點，那麼這個點就會粘在那裏。

例如，這樣的事情會工作

#mystylename{ 
    position:absolute; 
    bottom:0; 
    right:0; 
} 

，你可能需要調整它來得到它坐在那裏，你想，也可能添加的z-index

Answer 4

如果您需要動畫，請在動畫之前將div設置爲絕對值，然後在動畫重新將其設置爲固定之後，如下例所示。

$('.mydiv').animate({ 
opacity: 1, 
right: "50px", 
bottom: "50px", 
height: "toggle" 
}, 1000, function() { 
// Animation complete. 
}).css('position','fixed'); 

以上div的CSS也在下面。

.mydiv { 
    text-align: center; 
    background: #00DD88; 
    background: -moz-linear-gradient(center top , #00DD88 0%, #00CC00 100%) repeat scroll 0 0 transparent; 
    border-radius: 30px 30px 30px 30px; 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 
    margin: 5px 0 10px 15px; 
    position: absolute; 
    right: -980px; 
    width: 200px; 
    height: 50px; 
    display: none; 
    z-index: 100; 
} 

我知道這是舊的，但它一定會幫助別人:)

Answer 5

您將要設置的位置是：固定;而不是位置：絕對;

Answer 6

對於這篇舊文章，一個css專用的技巧是在div後放置一個頂部-1.2em的位置，使其與上方元素的底部重疊。

HTML：

<textarea class="no-whitespace-right">This is a test resize it.</textarea> 
<span class="float-lower-left">length could go here</span> 

CSS：

.no-whitespace-right { 
    /* any whitespace to the right and the overlap trick fails */ 
    width: 100%; 
} 

.float-lower-left { 
    position: relative; 
    float: right; 
    right: 1em; 
    top: -1.2em; 
    /* push it up into the element before it. This is a trick for bottom-right */ 
    right: 1em; 
    z-index: 200; 
    opacity: 0.5; 
    font-weight:bolder; 
} 

https://jsfiddle.net/qwm3pu8d/