今天在实际项目中，写首页一屏的时候，发现页脚定位（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. 动软DbHelperSQL
			
    using System; using System.Collections; using System.Data; using System.Data.SqlClient; using System ...
    
			
    2. 
						
  2. loadrunner学习系列---脚本编写(2)
			
    loadrunner学习系列---脚本编写(2) 今天接着翻译http://www.wilsonmar.com/1lrscrīpt.htm上面关于LR脚本编写部分. VUser_Init部分 这里是V ...
    
			
    3. 
						
  3. pg总览
			
    一.编译安装初始化等 ./configure --prefix=/release --with-openssl --without-ldap --with-libxml - -enable-threa ...
    
			
    4. 
						
  4. 我的服装DRP之即时通讯——为WCF增加UDP绑定（应用篇）
			
    发个牢骚,博客园发博文竟然不能写副标题.这篇既为我的服装DRP系列第二篇,也给为WCF增加UDP绑定系列收个尾.原本我打算记录开发过程中遇到的一些问题和个人见解,不过写到一半发现要写的东西实在太多,有 ...
    
			
    5. 
						
  5. JS-jquery 获取当前点击的对象
			
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
    
			
    6. 
						
  6. topology进程结束会不会关闭数据库连接
			
    测试环境:redhat,oracle 11.2.0.3.0 测试目标:当java进程关闭之后,进程的数据库连接会不会被释放,何时被释放 实验证明:在运行topology前,执行 select coun ...
    
			
    7. 
						
  7. <每日一题>题目10：求斐波拉契数列
			
    def func(x): m,n = 0,1 i = 0 while i < x: yield m m,n = n,m+n i += 1 fib = [] get_func = func(100 ...
    
			
    8. 
						
  8. badboy的录制和jmeter的使用
			
    v  Jmeter是什么 Apache Jmeter是Apache组织开发的基于Java的压力测试工具. Jmeter可以用于对服务器.网络或对象模拟巨大的负载,来自不同压力类别下测试它们的强度和分析 ...
    
			
    9. 
						
  9. ES6之主要知识点(二) 变量的解构赋值。默认值
			
    引自http://es6.ruanyifeng.com/#docs/destructuring 数组解构赋值 默认值 对象解构赋值 用途 1.数组的解构赋值 let [a, b, c] = [1, 2 ...
    
			
    10. 
						
  10. Reflections框架，类扫描工具
			
    Reflections是一个能提供一站式服务的对象. 巧用Reflections库实现包扫描(扫描某个包中某个接口实现.注解等) 它扫描工程的classpath,为元数据建索引,允许你运行时查询元数据 ...
    
			
    11.