Fix DIV to bottom right corner

I have used html and body attributes to have a gradient background and a flower background for my website.

I have also used a div to have the bottom right hand flower where it is. Works great, but not when scrolling. How do i get the bottom right hand corne开发者_高级运维r image to stick to the bottom of the screen ?

You will want to set position: fixed; instead of position: absolute;.

Here's more info on the Position Property.

.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

if you put the flower inside a div and position it absolute bottom and right this will stick it there.

For example, something like this will work

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

you may need to tweak it to get it sat where you want and also maybe add a z-index

If you require animation, set you div as absolute before the animation and then after the animation re set it to fixed as the below example.

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

css for the above div is below as well.

.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;
}

I know this is old but it will definitely help someone :)

A css-only trick for this old post is to put a after the div and position the top -1.2em so it overlaps the bottom of the element above it.

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/

You might need to use JavaScript to accomplish this task. Such techniques will accomplish the effect you desire, but they tend not be animate very smoothly. When scrolling, such a "stuck" object will tend to skip and stutter. I found an example here but have not tried it myself. I recommend searching for a few examples and trying out the one that looks cleanest and most modern.

You will want to set position: fixed; instead of position: absolute;