Positioning div element on center of screen

Question

Hi there.

I want to positioning a div element (popup) on the center of the screen via CSS. No problem with this.

The problem comes when i scroll the browser and then i click on the element that displays the popup, but this one will be displayed on the top of the page, instead of centering it on the rendered area (scrolled)

The popup must remain stocked to the page and let scrolling over it.

Does anyone know how to do it?

Thanks in advance

Answer 1

I believe what you want is position:fixed instead of position:absolute.

Taken from jqModal:

.popup{
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #eeeeee;
color: #333333;
padding: 12px;
}

Answer 2

This is achievable in Javscript. You should have the link that brings up the div element do this (jQuery):

var divTop = 75 + $(window).scrollTop();    // places the popup 75px from the top    
$('.popup_inner').css({'top':divTop, 'display':block});

Position: fixed is also an option, but I don't believe it is supported by IE6, if that matters to you.