css 实现固定层效果
浏览数：32 /
时间：2015年06月09日
1、固定层效果
固定层效果在网站的页面中非常常见，如下图实例：
在拖动滚动条时，页面的“top”层始终显示在页面最顶方，而“content”层则会穿过“top”层上下移动，这种效果即为固定层效果。
2、关于css的position
position属性有四个值，分别为：
- absolute：绝对定位。相对于 static 定位以外的第一个父元素进行定位。
- fixed： 绝对定位。相对于浏览器窗口进行定位。
- relative： 相对定位。按照元素的原始位置进行定位。
- static： 默认值，没有定位，元素出现在正常的流中。
absolute与fixed都为绝对定位，其共同点为：
- 完全脱离标准文档流。
- 未设置偏移量时，都定位在父元素的左上角。
不同点为：
- absolute：无定位的祖先元素，以<html>为基准偏移。
- 有定位的祖先元素，以最近的已定位父元素为基准偏移。
- fixed： 永远以浏览器可视窗口为基准偏移。
3、实现
所以固定层的实现非常简单，只需要设置需要固定层的position属性值为fixed，再根据需要设置偏移量即可。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
