将DIV固定在右下角

Question

我已经使用html和body属性为我的website创建了渐变background和花朵background。

我还使用了div将右下角的花朵放在它所在的位置。效果很好，但在滚动时就不行了。如何让右下角的图像粘在屏幕底部？

Answer 1

您将希望设置position: fixed;而不是position: absolute;。

这是Position属性上的more info。

​

.bottomright {
     position: fixed;
     bottom: 0px;
     right: 0px;
}

.demo {
     background-color: HotPink;
     padding: 20px;
     margin: 5px;
}

Hello<br>

<div class="demo bottomright">
   I'm a Div!
</div>

there

​

Answer 2

如果你把花放在一个div里面，并把它放在绝对的底部和右边，这将会把它固定在那里。

例如，像这样的东西就可以工作。

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

您可能需要对其进行调整，使其位于您想要的位置，还可能需要添加z索引

Answer 3

如果您需要动画，请在动画之前将div设置为绝对，然后在动画之后将其重新设置为fixed，如下例所示。

$('.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;
}

我知道这很古老，但它肯定会对某些人有所帮助:)