无论页面滚动到何处，如何使< div >保持在离页面顶部100像素的位置？

Question

我正在构建一个带有< div >框(chat box)的网站，每当网站所有者决定与他的访问者开始对话时，该框都会弹出。现在的情况是，在聊天框弹出之前，访问者可能已经向下滚动了几页，然后聊天框就隐藏了！如何才能使聊天框始终弹出在页面的可见区域内？

我使用jQuery来轮询服务器，并在需要时加载框。

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

感谢您的帮助:)

Answer 1

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

Answer 2

这可以通过应用position: fixed样式来完成。

Doesn't work in IE6 though，如果你足够关心的话，你需要一个Javascript回退。

Answer 3

您可能需要在每个可能的页面上为这项工作再添加一个属性。

除了position:fixed和top:100px之外，您还需要添加z-index:99999，这将帮助聊天框留在页面顶部，即使有些元素已经设置了z-inex属性。