61

How do I make a DIV always float on the screen's top right corner, so that even when I scroll the page down, the DIV still shows up in the same fixed location? Thanks.

akanevsky
  • 619
  • 1
  • 5
  • 3
  • see this link , i think you want the opposite of sticky floating footer.http://stackoverflow.com/questions/146659/how-do-i-get-a-floating-footer-to-stick-to-the-bottom-of-the-viewport-in-ie-6 – kobe Nov 21 '10 at 03:02

2 Answers2

89

Use position: fixed, and anchor it to the top and right sides of the page:

#fixed-div {
    position: fixed;
    top: 1em;
    right: 1em;
}

IE6 does not support position: fixed, however. If you need this functionality in IE6, this purely-CSS solution seems to do the trick. You'll need a wrapper <div> to contain some of the styles for it to work, as seen in the stylesheet.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Thanks, but I need a cross-browser solution, whether or not it involves only CSS or a mix of CSS and Javascript. – akanevsky Nov 21 '10 at 02:48
  • @akavsky are you ok with jquery function $(window).scroll(function () { }); then we can easily postion that at the ....right corner using jquerys animate – kobe Nov 21 '10 at 03:00
  • To comment on the position:fixed not working in IE, http://www.howtocreate.co.uk/fixedPosition.html is the workaround for this. – digitalfoo Nov 21 '10 at 02:56
  • While answering a different question I managed to figure out why the solution I link to seems to work. If you're curious to know the details, they're all here: http://stackoverflow.com/questions/14718319/why-does-overflow-x-hidden-make-my-absolutely-positioned-element-become-fixed/14740580#14740580 – BoltClock Sep 27 '13 at 10:59
  • Still works great! In 2022, I'm very happy to have no concern about whether or not IE6 is supported! :D – neminem Aug 19 '22 at 00:10
12

Use position:fixed, as previously stated, IE6 doesn't recognize position:fixed, but with some css magic you can get IE6 to behave:

html, body {
    height: 100%;
    overflow:auto;
}
body #fixedElement {
    position:fixed !important;
    position: absolute; /*ie6 */
    bottom: 0;
}

The !important flag makes it so you don't have to use a conditional comment for IE. This will have #fixedElement use position:fixed in all browsers but IE, and in IE, position:absolute will take effect with bottom:0. This will simulate position:fixed for IE6

Alex
  • 64,178
  • 48
  • 151
  • 180
  • 1
    You can also use `* html body #fixedElement { position: absolute; }` after that rule. – BoltClock Nov 21 '10 at 02:59
  • Did this in Chrome, but the 2nd position overwires the 'fixed', so I would swap the order of those two. That will make this work – patrick Dec 17 '12 at 13:04
  • @patrick: It shouldn't if you added the `!important` flag correctly. That said, of course swapping both works as well, without the need for `!important`. – BoltClock Feb 14 '13 at 13:09