How to create a center div scrolling with the page?

I have a website and I would like to put a DIV above this website with field to enter e-mail and button "Su开发者_运维百科bscribe". It should work like this advertisements that we all like. So this div should be always on the center of the screen, and it should be "above" the website and scroll while user is browsing though the page. When user clicks X it should close.

How to do this?

See the CSS position:fixed and z-index properties. To center the item horizontally and vertically, give it fixed dimensions, position it at 50%,50%, and then use negative margins. For example:

#annoying-floater {
  z-index:10;
  position:fixed;
  top:50%; left:50%;
  width:640px; height:480px;
  margin-left:-320px; margin-top:-240px
}

To 'close' it, set the display to none via JS. For example:

window.onload=function(){
  document.getElementById('annoying-floater-closer').onclick = function(){
    document.getElementById('annoying-floater').style.display='none';
  }
}

do you mean that as the page scrolls the div will stay centered? in that case, use position: fixed to place your div; which will work except for < IE8, to get that to work there, use this