码迷,mamicode.com
首页 > Web开发 > 详细

css 实现固定层效果

时间:2014-09-25 13:16:08      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:blog   http   io   os   sp   2014   on   c   log   

1、固定层效果

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

bubuko.com,布布扣

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

 

2、关于css的position

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

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

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

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

不同点为:

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

3、实现

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

 

css 实现固定层效果

标签:blog   http   io   os   sp   2014   on   c   log   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!