Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS to keep element at "fixed" position on screen

Tags:

html

css

I'm looking for a trick to create a "fixed" HTML object on the browser screen using CSS. I want it to stay in the same position all the time, even when the user scrolls through the document. I'm not sure what the proper term for this is.

It would be like the chat button on Facebook or the Feedback button that is on some websites that follows you throughout the page.

In my situation, I want to keep a div at the absolute bottom-right corner of the screen at all times. Sample CSS appreciated.

like image 232
Mike Avatar asked Sep 27 '11 22:09

Mike


People also ask

How do you make elements stay in the same place in CSS?

You need a wrapper like div class="wrap" which has position: relative . Then everything positioned absolutely inside this wrap will be absolute from top left inside the relative element.

How do I fix fixed position in CSS?

Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.


2 Answers

You may be looking for position: fixed.

Works everywhere except IE6 and many mobile devices.

like image 59
Pekka Avatar answered Oct 17 '22 23:10

Pekka


The easiest way is to use position: fixed:

.element {   position: fixed;   bottom: 0;   right: 0; } 

http://www.w3.org/TR/CSS21/visuren.html#choose-position

(note that position fixed is buggy / doesn't work on ios and android browsers)

like image 20
mreq Avatar answered Oct 17 '22 21:10

mreq