今天在实际项目中，写首页一屏的时候，发现页脚定位（position：absolute；）没有达到我想要的效果（不管屏幕大小，页脚始终相对浏览器底部定位）。于是我觉得有点奇怪，然而我旁边的小哥说：很明显你应该用（position：fixed；），于是连忙整理一下他俩的区别。

 1、fixed--固定定位，参照位置是浏览器窗口的左上角。

　　2、absolute--绝对定位，参照位置是离当前元素最近的定位方式为fixed、absolute、relative的祖先元素的左上角。

代码如下：

效果如下：

												


											
fixed和absolute的区别的更多相关文章
	

    
								
  1. Position属性四个值：static、fixed、absolute和relative的区别和用法
		
    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
    
		
    2. 
						
  2. fixed 和 absolute 定位的区别
		
    fixed:固定定位           absolute:绝对定位 在没有滚动条的情况下两者其实没有差异.但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高 ...
    
		
    3. 
						
  3. 一张图看懂css的position里的relative和absolute的区别
		
    position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, b ...
    
		
    4. 
						
  4. 关于css float 属性以及position:absolute 的区别。
		
    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...
    
		
    5. 
						
  5. table-layout引起的探索——fixed和auto的区别
		
    问题:最近想把mui提供的底部导航组件样式单独抽出来,遇到一个问题:给底部图片下的文字设置了超出隐藏,但没有生效,如下图: 注:该底部导航为mui提供的组件 解决:这让我百思不得其解,经过一些琢磨后发 ...
    
		
    6. 
						
  6. /*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/
		
    <!DOCTYPE html> /*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/ <html lang=" ...
    
		
    7. 
						
  7. Position属性四个值：static、fixed、relative、absolute的区别和用法
		
    1.static(静态定位):默认值.没有定位,元素出现在正常的文档流中(如果设置 top, bottom, left, right, z-index这些属性就不起做作了). 2.relative(相 ...
    
		
    8. 
						
  8. css中postion的fixed与absolute区别详解
		
    fixed:固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px) absolute:绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先 ...
    
		
    9. 
						
  9. Position属性四个值：static、fixed、absolute和relative的区别
		
    1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative(相对定位):生成相对 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 三. var let const的理解 以及 立即执行函数中的使用 以及 for循环中的例子
			
    一. 立即执行函数 windows中有个name属性,name='' '' var 如果我们用var name 去声明,那就会改变windows中name的值(因为我们不是在函数作用域中声明的,所以会 ...
    
			
    2. 
						
  2. [JZOJ4684] 【GDOI2017模拟8.11】卡牌游戏
			
    题目 描述 题目大意 有111到2n2n2n牌,一开始分别给两个人,每人nnn张. 轮流出牌,给出对手出牌的顺序,若自己的牌更大,就记一分. 在中间的某个时刻可以改变游戏规则. 问最大的分数. 思考历 ...
    
			
    3. 
						
  3. Flask从入门到入土
			
    一.flask介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对 ...
    
			
    4. 
						
  4. 数据库DSN是什么
			
    数据库建立好之后,要设定系统的 DSN(数据来源名称),才能让网页可以知道数据库所在的位置以及数据库相关的属性.使用DSN的好处还有,如果移动数据库档案的位置,或是换成别种类型的数据库,只要重新设定  ...
    
			
    5. 
						
  5. react antd样式按需加载配置以及与css modules模块化的冲突问题
			
    通过create-react-app脚手架生成一个项目 然后运行npm run eject 把webpack的一些配置从react-scripts模块弹射出来, 方便自己手工增减,暴露出来的配置文件在 ...
    
			
    6. 
						
  6. nginx源码分析——数组
			
    ngx_array.h /* * Copyright (C) Igor Sysoev * Copyright (C) Nginx, Inc. */ #ifndef _NGX_ARRAY_H_INCLU ...
    
			
    7. 
						
  7. codeforces 1186E- Vus the Cossack and a Field
			
    传送门:QAQQAQ 题意:给一个01矩阵A,他的相反矩阵为B,每一次变换都会将原矩阵面积乘4成为: AB BA 矩阵的左上角固定,变换无限次,现有q个询问,即求一个矩阵内的1的个数. 思路:因为反转 ...
    
			
    8. 
						
  8. SpringMVC处理请求的大致流程是怎么样的
			
    SpringMVC请求处理流程   Spring MVC请求处理架构图:   1.用户首先发送请求到前端控制器Dispatcher Servlet,  2.在doDispath这个方法中会为请求找到对 ...
    
			
    9. 
						
  9. python collections 模块 之 deque
			
    class collections.deque(iterable[,maxlen]): 返回 由可迭代对象初始化的 从左向右的 deque 对象. maxlen: deque 的最大长度,一旦长度超出 ...
    
			
    10. 
						
  10. CCA Spark and Hadoop 开发者认证技能点【2016只为hadoop达到巅峰】
			
    Required Skills 技能要求: Data Ingest 数据消化: The skills to transfer data between external systems and you ...
    
			
    11.