将DIV修复到右下角

时间:2009-11-08 19:04:31

标签: css background

http://www.naomisalsi.com/

我使用了html和body属性来为上面的网站提供渐变背景和花背景。

我还使用了div来获得右下角的花朵。效果很好,但滚动时却不行。如何让右下角的图像粘在屏幕底部?

6 个答案:

答案 0 :(得分:34)

您需要设置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

答案 1 :(得分:31)

如果你把花放在一个div中并将它放在绝对的底部和右边,这会将它粘在那里。

例如,像这样的东西可以工作

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

您可能需要调整它以使其位于您想要的位置,也可以添加z-index

答案 2 :(得分:2)

如果需要动画,请在动画之前将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;
}

我知道这已经过时但肯定能帮到某人:)

答案 3 :(得分:2)

对于这个旧帖子来说,只有一个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;
}

enter image description here

https://jsfiddle.net/qwm3pu8d/

答案 4 :(得分:1)

您可能需要使用JavaScript来完成此任务。这些技术将达到你想要的效果,但它们往往不是非常流畅的动画。滚动时,这种“卡住”的物体往往会跳过并且口吃。我找到了一个例子here,但我自己没有尝试过。我建议您搜索一些示例,然后尝试一下看起来最干净,最现代的示例。

答案 5 :(得分:0)

您需要设置位置:固定;而不是位置:绝对;