今天在实际项目中，写首页一屏的时候，发现页脚定位（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. 1.前端数据可视化插件:Highcharts、Echarts和D3（区别）
			
    前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/).Echarts(http://echarts.baidu.com/)和D3(https: ...
    
			
    2. 
						
  2. vue-resourse简单使用方法
			
    一.安装引用 安装: npm install vue-resource --save-dev 引用: /*引入Vue框架*/ import Vue from 'vue' /*引入资源请求插件*/ im ...
    
			
    3. 
						
  3. SpringData_02_JPQL查询、SQL查询和方法命名规则查询
			
    1.使用JPQL的方式查询 JPQL查询:Hibernate提供的是HQL查询,而JPA提供的是JPQL查询语言 使用Spring Data JPA提供的查询方法已经可以解决大部分的应用场景,但是对于 ...
    
			
    4. 
						
  4. 国内有哪些质量高的JAVA社区？
			
    国内有哪些质量高的JAVA社区? 转自:http://www.zhihu.com/question/29836842#answer-13737722 并发编程网 - ifeve.com 强烈推荐 Im ...
    
			
    5. 
						
  5. Android基础控件RatingBar星级评分条的使用
			
    1.简介 RatingBar继承ProgressBar,除了ProgressBar的属性外还有特有属性: android:isIndicator:是否用作指示,用户无法更改,默认false andro ...
    
			
    6. 
						
  6. Java—重写与重载的区别
			
    1.重写(Override) 子类继承了父类原有的方法,但有时子类并不想原封不动的继承父类中的某个方法,所以在方法名,参数列表,返回类型(除了子类中方法的返回值是父类中方法返回值的子类时)都相同的情况 ...
    
			
    7. 
						
  7. Everything-启用http服务器（公网IP）会导致共享文件被搜索引擎搜索
			
    1. 漏洞利用成功的前提 公网ip 启用http服务器 2.产生原因 启用http服务器功能点:让用户在本地或局域网上的其他电脑使用浏览器进行搜索,并支持文件下载.若拥有公网IP的用户启用此功能,就是 ...
    
			
    8. 
						
  8. Linux CentOS CapsLock 大小写反转问题 解决
			
    虚拟机centos7,输入大小写字母反了,开启capslock的时候变成小写字母了,关闭则变成大写了... 只需要执行 setleds +caps 或 setleds -caps 即可,如图:
    
			
    9. 
						
  9. Dmarc指定外域邮箱接收报告
			
    场景说明: 如果要将DMARC报告发送到记录所在的域以外,则接收域需要配置DNS记录,以便电子邮件服务提供商知道收件人指定报告授权. ================================= ...
    
			
    10. 
						
  10. dom4j处理带命名空间的XML-使用XPath(转)
			
    dom4j处理带命名空间的XML-使用XPath 博客分类: XML   XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 使 ...
    
			
    11.