CSS layer - how to get it to hug the bottom

Fairly simple I'd have thought but under closer inspection, perhaps not. Would be grateful if anybody could help out with it.

Anyway, what I need to do is to get an image to stay in the bottom right. This is easy with absolute positioning but when you scroll down it remains in position. I can't specify it as a background image because I've already got one.

The rest of the layout is relatively positioned but that probably doesn't make any difference.


So to sum up, how can you get a layer to hug the bottom of the page even when you scroll down?



Thanks in advance,
Ed :thumbsup:

Just set the absolute positioning to:
div.name{position:absolute; bottom:1px; right:1px;}

Same result as having bottom: 0px and right: 0px;

Absolute positioning applies to the initial browser position but doesn't follow when you scroll.

you want position:fixed;

IE does not support this though.

Can you post a link to your site?

Unfortunately not, I have to keep it confidential until it's released and IE support is important moreso than anything else so fixed isn't really an option. I guess I'll have to do without it for the time being. Thanks for the help.

Hi,

Try this:

http://www.cssplay.co.uk/layouts/fixed.html

...and this:

http://www.divinentd.com/experiments/emulating-position-fixed.html

Kind regards,

Gary

Have you thought about positioning the image as an image and set its z-index to 1 and set the z-index to the content text to 5. This should allow the text to flow over the image as if it were a background no problem!

#YourPicture img {
position:absolute;
bottom:0;
right:0;
z-index:1;
}

#content {
position:relative;
z-index:5;
}

then put all you text in <div id=content>YourText</div>

That should do the trick.

Daniel