css 实现固定层效果
时间：2014-09-25 11:33:59
收藏：0
阅读：361
1、固定层效果
固定层效果在网站的页面中非常常见，如下图实例：
在拖动滚动条时，页面的“top”层始终显示在页面最顶方，而“content”层则会穿过“top”层上下移动，这种效果即为固定层效果。
2、关于css的position
position属性有四个值，分别为：
- absolute：绝对定位。相对于 static 定位以外的第一个父元素进行定位。
- fixed： 绝对定位。相对于浏览器窗口进行定位。
- relative： 相对定位。按照元素的原始位置进行定位。
- static： 默认值，没有定位，元素出现在正常的流中。
absolute与fixed都为绝对定位，其共同点为：
- 完全脱离标准文档流。
- 未设置偏移量时，都定位在父元素的左上角。
不同点为：
- absolute：无定位的祖先元素，以<html>为基准偏移。
- 有定位的祖先元素，以最近的已定位父元素为基准偏移。
- fixed： 永远以浏览器可视窗口为基准偏移。
3、实现
所以固定层的实现非常简单，只需要设置需要固定层的position属性值为fixed，再根据需要设置偏移量即可。
原文：http://www.cnblogs.com/gaorubin/p/3992173.html
评论（0）