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,410
  • 29
  • 105
  • 173

2 Answers2

2

CSS:

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

jQuery:

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

$el.css({
    position: 'fixed',
    top: '-' + $el.outerHeight()
});
Joseph Silber
  • 205,539
  • 55
  • 352
  • 286
  • 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
  • 89,567
  • 21
  • 132
  • 165