HTML中滚动条滚动时如何让上面的标题固定不动

在做web前端开发时，有时候需要滚动条滚动时让上面的标题固定不动。如果一开始在设计阶段html元素的层次结构是对的，通过在不同的节点设置overflow就很容易实现。



但是有时候一开始的层次结构设计的不能满足让标题固定不动，如果调整层次结构又会改动很多文件。例如一开始，标题并没有单独放在一个div里，而是按左右设计的，并且是在2个不同的模板文件里。这时要实现上述需求，在不改动大的层次结构时，只能在标题上的css做文章了。



为了让标题固定不动，我们把标题那块的div的position设置成fixed。然后把相应的坐标设置正确，例如left，right，top之类。为了标题在滚动条滚动时，标题不被下面的容器覆盖，需要把标题的z-index的数值设置的更大一点。

position:fixed;

top:78px;

z-index:1;