如何仅使用CSS创建覆盖div (不使用Javascript)？

Question

我正在试图找出如何创建一个div来覆盖页面，在页面滚动时停留在一个位置，如本文中使用的：前5名个人电脑游戏攻略。(你会看到顶部有一个没有移动的酒吧，上面有游戏玩家打电话回家的标志)。

我甚至不知道什么是正确的术语--它可能不是重叠的:)但是不管它是什么，它似乎只是用CSS完成的，当Javascript被禁用时，它就会显示出来。

Answer 1

#status-bar {
  width: 100%;
  height: 36px;
  position: fixed;
  top: 19px;
  left: 0;
  z-index: 2147483646;
  -moz-box-shadow: 0px 0px 3px #8a8a8a;
  -webkit-box-shadow: 0px 0px 3px #8a8a8a;
  box-shadow: 0px 0px 3px #8a8a8a;
  background: transparent url("/images/Elements/status-bar/status-bar-bg.png") repeat-x;
}

页面源。

相关阅读：CSS定位101在列表之外

Answer 2

小小的警告。如果出于某种原因(我希望IE6得到完全反对)，您确实需要支持IE6，那么该浏览器不支持位置:修复。您可能希望使用"_“css属性hack来使其对于IE6的情况来说是绝对的(IE6；)。其他一些属性的调整可能需要看起来类似于非IE6版本，并以一种至少是可以接受的方式运行。

Answer 3

CSS代码

.picColor{
    width:320px;
    height:240px;
    background: url(img/flower.png) no-repeat;
    border:5px solid #000000;
}
.picColor:hover
{
    opacity:0.9;
    background:#FFFFFF;
    width:320px;
    height:240px;
}

全源.CSS覆盖

贾斯汀