Log in

View Full Version : How do I make an object stay in front of everything while scrolling in HTML?



ted.johnson0988
03-27-2012, 01:19 AM
This is a little tricky to explain so I'll add a visual aid.

I want to have an object stay in the bottom right corner of my page no matter where the user scrolls. But I also want it to be ABOVE all the content of the site.

For example, in the following two pictures where black=content and red=object

http://i1088.photobucket.com/albums/i324/TedJohnson0988/CONTENTONE.jpg

http://i1088.photobucket.com/albums/i324/TedJohnson0988/CONTENTTWO.jpg

The second image is just the content being scrolled to the top but the object thats in place.

Sorry if my explanation is kind of confusing.

traq
03-27-2012, 01:53 AM
use position: fixed;

you may need to adjust the z-index (and/or put the block last in your markup) to keep it "on top."

molendijk
03-27-2012, 09:30 PM
Yes, something like:
<div style="position: fixed; right:0px; bottom: 0px; background:red; width:100px; height:100px; zindex:1000"><div>
===
Arie Molendijk