今天在实际项目中，写首页一屏的时候，发现页脚定位（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. vue倒计时：天时分秒
			
    data数据定义 data () { return { curStartTime: '2019-07-31 08:00:00', day: '0', hour: '00', min: '00', se ...
    
			
    2. 
						
  2. 莫烦pytorch学习笔记(二)——variable
			
    .简介 torch.autograd.Variable是Autograd的核心类,它封装了Tensor,并整合了反向传播的相关实现 Variable和tensor的区别和联系 Variable是篮子, ...
    
			
    3. 
						
  3. php包含文件
			
    PHP 包含文件 PHP include 和 require 语句 在 PHP 中,您可以在服务器执行 PHP 文件之前在该文件中插入一个文件的内容. include 和 require 语句用于在执 ...
    
			
    4. 
						
  4. Java-Druid：Druid
			
    ylbtech-Java-Druid:Druid Apache Druid(孵化)是一个高性能的实时分析数据库. 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部  ...
    
			
    5. 
						
  5. Hibernate 查询语言
			
    查询语言 Hibernate 查询语言(HQL)是一种面向对象的查询语言,类似于 SQL,但不是去对表和列进行操作,而是面向对象和它们的属性. HQL 查询被 Hibernate 翻译为传统的 SQL ...
    
			
    6. 
						
  6. jeecms v9开发资料
			
    开发文档 . 系统架构概述 本系统核心架构为 FreeMarker+hibernate+Spirng 的 mvc 分层架构. 1.1 分层架构模型 img 1.2 数据流转模型 (前端) img .  ...
    
			
    7. 
						
  7. Spring Boot配置公共的线程池
			
    内存资源很宝贵,线程池资源不宜过多的创建,同一个应用,尽量使用统一的线程池,并且相关参数需要设置适当,不造成资源的浪费,也不影响性能的提升. import java.util.concurrent.T ...
    
			
    8. 
						
  8. stylus实现边框1px
			
    //1px的实现 border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = ) // 为边框 ...
    
			
    9. 
						
  9. Leetcode139. Word Break单词拆分
			
    给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词. 说明: 拆分时可以重复使用字典中的单词. 你可以假设字典中没有重复 ...
    
			
    10. 
						
  10. Android 开发 防止按键连续点击
			
    前言 按键防止连续点击是任何一个项目都要考虑的功能.下面我们将介绍几种防止按键连续点击的方法 用工具类实现 /** *@content:按键延时工具类,用于防止按键连点 *@time:2019-5-1 ...
    
			
    11.