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!

Answer 1

CSS :

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

Answer 2

设定position:absolute和z-index:1000

Answer 3

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

Answer 4

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;
}