今天在实际项目中，写首页一屏的时候，发现页脚定位（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. JUC 一 Callable
			
    java.util.concurrent.Callable是一个泛型接口,只有一个call()方法 Callable和Runnable的区别 Callable使用call()方法,Runnable使用 ...
    
			
    2. 
						
  2. /usr/lib/gcc/x86_64-linux-gnu/5/../../../x86_64-linux-gnu/crt1.o：在函数‘_start’中： (.text+0x20)：对‘main’未定义的引用
			
    原因是新建了一个可执行的函数,里面却没有main函数,加上main函数即可
    
			
    3. 
						
  3. 为什么Java中的String是设计成不可变的？（Why String is immutable in java)
			
    There are many reasons due to the string class has been made immutable in Java. These reasons in vie ...
    
			
    4. 
						
  4. 02.vs插件 获取项目和解决方案路径
			
    获取项目 解决方案路径 /// <summary> /// 获取并设置项目和解决方案绝对路径 /// </summary> /// <returns></re ...
    
			
    5. 
						
  5. python学习笔记4.1_检测和过滤异常值
			
    1.查看数据分布data.describe() 2.找出某列中符合筛选条件的值 3.找出符合筛选条件的行 4.用np.sign(data)*3设置绝对值的标准 data[np.abs(data)> ...
    
			
    6. 
						
  6. springcloud 使用RabbitMq
			
    新建一个项目,三个module 分别为eureka-server,config-server,config-client, eureka-server 的pom.xml, <?xml versi ...
    
			
    7. 
						
  7. [Ceoi2007]Royaltreasury
			
    #1945. [Ceoi2007]Royaltreasury Online Judge:Bzoj-1945 Label:树形Dp,高精度 题目描述 在很久很久以前的一个王国里,王国的财产开始变得越来越 ...
    
			
    8. 
						
  8. warning LNK4098: 默认库“MSVCRT”与其他库的使用冲突；请使用 /NODEFAULTLIB:library
			
    解决方法:是所有项目的这个"代码生成"属性设置保持一致. 项目——属性——配置属性——C/C++——代码生成:他有/MT,/MTd,/Md,/MDd四个选项,你必须让所有使用的库都 ...
    
			
    9. 
						
  9. angularjs中动态为audio绑定src问题总结
			
    先上代码 <div class="block_area block_audio" ng-show="model.url"> <audio co ...
    
			
    10. 
						
  10. Extjs 疑难杂症 （LoadMark 遮罩、Panel Update无效、chrome浏览器date控件全屏）
			
    一.在extjs gridPanel中使用LoadMark无效,三步搞定. 原代码: grid = new Ext.grid.GridPanel({ store: store, title:'资料列表 ...
    
			
    11.