relative的意思就是相对自己的一开始的位置进行的定位。如图：
但是这个元素的本身边距不变，还在原来位置
 
absolute的意思就是
如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）
一般z-index和left,top,right,bottom这些元素也是在设置了position的定位之后才会用到

CSS的相对定位和绝对定位的更多相关文章

  1. 详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  2. Web—12-详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  3. 详解CSS的相对定位和绝对定位（讲得很详细）

    详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...

  4. css定位:相对定位、绝对定位、固定定位的区别与特性

    css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...

  5. CSS中相对定位与绝对定位

    看了几个讲解定位的博客,觉得还不错,分享之: 博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html 文章中,主要需要参考的有两点: 1,相对 ...

  6. CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

    其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...

  7. css position相对定位与绝对定位彻底搞懂

    定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...

  8. h5整理--详解css的相对定位和绝对定位

    浏览器默认状态下position的属性默认值是static也就是没有定位,元素出现在正常的文档流中,这个时候给元素设置的left,right.bottom.top这些偏移属性是没有效果的,不会生效: ...

  9. css 中相对定位和绝对定位

    1. css中定位机制有三种: 标准文档流, 浮动, 绝对定位 2. 绝对定位就属于第三种定位, 用到position属性, 下面就是具体设置 相对定位: 相对于自身原有位置(就是普通流的时候)进行偏 ...

  10. CSS的相对定位和绝对定位（position）

    什么是定位呢? 定位(position),故名思议,就是确定元素在页面中的位置. CSS的常用定位有两种,一种是相对定位,一种是绝对定位. 下面我们看例子 <html> <head& ...

随机推荐

  1. 技术胖Flutter第三季-15垂直布局Column组件

    博客地址: https://jspang.com/post/flutter3.html#toc-8eb 垂直布局 左对齐: crossAxisAlignment: CrossAxisAlignment ...

  2. 爬虫代码实现四：采用Hbase存储爬虫数据(2)

    导入hbase的jar包,在maven仓库找:进入http://mavenrepository.com/,输入hbase client,选择apache hbase client, 点击进入,选择 点 ...

  3. html和xml的区别

    一.HTML HTML(HyperTextMark-upLanguage)即超文本标记语言,是WWW的描述语言. 二.XML XML即ExtentsibleMarkup Language(可扩展标记语 ...

  4. 关于weblogic 10.3.6.0 的漏洞复现（1）

    最近小R 搭建了个weblogic,  因为之前在公司找系统漏洞的时候,发现了这个漏洞,所以为了特地专门搭建了个10.3.6.0版本. 漏洞编号: CVE-2017-10271 漏洞的描述:就是web ...

  5. 《剑指offer》面试题17—合并两个排序链表

    题目:输入两个递增排顺序的链表,合并这两个链表并使合并后的链表仍是递增排序的. 重点: 1.代码鲁棒性:要判断输入的两个链表都为NULL:其中一个链表为NULL的情况. 2.用递归实现,注意递归的思路 ...

  6. Two sum（给定一个无重复数组和目标值，查找数组中和为目标值的两个数，并输出其下标）

    示例: nums = [1,2,5,7] target = [6] return [0,2] Python解决方案1: def twoSum(nums, target): ""&q ...

  7. bzoj 2055: 80人环游世界【有上下界有源汇最小费用最大流】

    连有上下界的边(ss,i,(0,m),0),(i',t,(0,m),0),表示从任意点开始和结束 连(i,j,(0,m),d[i][j]),表示可以买票飞过去 连(i,i',(v[i],v[i]),0 ...

  8. spoj3105 MOD - Power Modulo Inverted（exbsgs）

    传送门 关于exbsgs是个什么东东可以去看看yyb大佬的博客->这里 //minamoto #include<iostream> #include<cstdio> #i ...

  9. [Xcode 实际操作]八、网络与多线程-(25)实现ShareSdk的社会化分享功能

    目录:[Swift]Xcode实际操作 完成开发包的安装和配置之后,本文将演示社会化分享功能的具体开发步骤. 在项目导航区,打开并编辑程序代理文件[AppDelegate.swift] import ...

  10. APP为什么会被打回来??

    APP的设置界面, 按钮使用了类似iPhone的操作方式以及icon的圆角设计  ->  重新设计 APP的年龄设置太低  ->  改年龄 APP里有实物奖励  ->  免责声明, ...