修复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/