Positioning div to top of viewport using jQuery

Question

How do I position the #lightbox div to always be at the top of the viewport?

$(document).ready(function(){
    $('.mehr').click(function() {
    $("body").css("overflow", "hidden");
    $('#lightbox').css({'visibility' : 'visible'}).animate({'background-color': 'rgba(0, 0, 0, 0.9)', 'opacity': '1'}, 500);
});

Many thanks for any help!

How does your HTML/CSS look like? Make it overlaying the viewport you can use `position:absolute` or `position:fixed` in combination with a high `z-index`. A jsfiddle would be a great help.. — damian, Oct 29 '13 at 12:09
use this [link](http://stackoverflow.com/questions/1570075/what-is-the-logic-of-lightbox-2-on-where-to-position-the-popup) — John, Oct 29 '13 at 12:10

score 0 · Answer 1 · answered Oct 29 '13 at 12:09

0

CSS :

#lightbox {
  position: absolute;
  z-index: 999;
}

answered Oct 29 '13 at 12:09

Guillaume Lhz

904
5
16

score 0 · Answer 2 · answered Oct 29 '13 at 12:10

0

Set position:absolute and z-index:1000

answered Oct 29 '13 at 12:10

SanketS

963
1
13
36

score 0 · Answer 3 · answered Oct 29 '13 at 12:12

0

position: fixed; top:0; z-index:999999;

answered Oct 29 '13 at 12:12

visualex

736
12
17

score 0 · Accepted Answer · answered Oct 29 '13 at 12:13

You can use this with simple HTML / CSS : http://jsfiddle.net/wZDXg/

HTML:

<div id="lightbox">Light box</div>
<div id="other">Other content</div>

CSS:

body
{
    margin:0;    
}

#lightbox
{
    background-color:gray;
    width : 100%;
    height: 150px;
    position : fixed;
    top      : 0;
    margin-bottom:150px;
}

#other
{
    margin-top : 150px; 
    height     : 1500px;
    background-color:#999999;
}

Positioning div to top of viewport using jQuery

4 Answers4