0

I want an absolutely-positioned element to be just out of the browser window - just off the top of the browser viewport. Note that I cannot provide an exact height of the specified element.

Can this be done? If not, using jQuery is fine too.

Lucas
  • 16,930
  • 31
  • 110
  • 182

2 Answers2

2

CSS:

#theElement {
    position: fixed;
    bottom: 100%;
}

jQuery:

var $el = $('#theElement');

$el.css({
    position: 'fixed',
    top: '-' + $el.outerHeight()
});
Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
  • mainly because I want it to be positioned just off the screen on the loading of the page, and then they will see the element move up if it was javascript. – Lucas Jan 27 '13 at 01:45
  • @think123 - Why do you need it *just above*. Do you care if it's *way above*? – Joseph Silber Jan 27 '13 at 01:46
  • Well if it was way above, then it would take a long time for an animation to move it back down. Here, I went with `bottom: 100%`, but for some reason this doesn't work. Can you see why? http://jsfiddle.net/Q8udg/3/ – Lucas Jan 27 '13 at 01:47
  • @think... not hard to move it closer with script once you know it's height. Could set it 20000px offscreen and fix it later – charlietfl Jan 27 '13 at 01:47
  • @think123 - You have to use matching types. You should animate to `0%`: http://jsfiddle.net/Q8udg/5/ – Joseph Silber Jan 27 '13 at 01:48
0

If your element is at body level this should work:

#element {
  position: absolute;
  top: -100%;
}
elclanrs
  • 92,861
  • 21
  • 134
  • 171