How do I keep a < div > 100 pixels from the top of a page, no matter where the page is scrolled to?

I'm building a website with a < div > box (chat box) that pops up whenever the website owner decides to begin a conversation with one of his visitors. The way it开发者_如何学C is now, a visitor may have scrolled several pages down before the chat box pops up, and then the chat box is hidden! How can I make it so that the chat box always pops up within the visible area of the page?

I use jQuery to poll the server, and load the box when needed.

#chatBox {
  z-index: 100;
  position: absolute;
  top: 100;
  left: 200;
  width: 400;
  height: 200;
  background-color: #8596C1;
  padding: 15px;
  border: solid 2px;
  border-color: #BDDEFF #14285F #14285F;
  display: none;
}

Thanks for your help :)

.chat_container { position: fixed; top: 100px; }

That can be done by applying a position: fixed style.
Doesn't work in IE6 though, you'd need a Javascript fallback if you care enough.

You probably need to add one more attribute to this work on every possible page.

Along with position:fixed and top:100px you need to add z-index:99999 which will help the chat box stay on the top of the page even with some elements which already set the z-inex attributes.