首页 > Web开发 > 详细

css 实现固定层效果

时间:2014-09-25 11:33:59      阅读:361      评论:0      收藏:0      [点我收藏+]

1、固定层效果

固定层效果在网站的页面中非常常见,如下图实例:

bubuko.com,布布扣

在拖动滚动条时,页面的“top”层始终显示在页面最顶方,而“content”层则会穿过“top”层上下移动,这种效果即为固定层效果。

 

2、关于css的position

position属性有四个值,分别为:

  • absolute:绝对定位。相对于 static 定位以外的第一个父元素进行定位。
  • fixed:     绝对定位。相对于浏览器窗口进行定位。
  • relative: 相对定位。按照元素的原始位置进行定位。
  • static:    默认值,没有定位,元素出现在正常的流中。

absolute与fixed都为绝对定位,其共同点为:

  • 完全脱离标准文档流。
  • 未设置偏移量时,都定位在父元素的左上角。

不同点为:

  • absolute:无定位的祖先元素,以<html>为基准偏移。
  •                有定位的祖先元素,以最近的已定位父元素为基准偏移。
  • fixed:     永远以浏览器可视窗口为基准偏移。

3、实现

所以固定层的实现非常简单,只需要设置需要固定层的position属性值为fixed,再根据需要设置偏移量即可。

 

css 实现固定层效果

原文:http://www.cnblogs.com/gaorubin/p/3992173.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!