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. nohup不输出日志信息的方法及linux重定向

    最近使用nohup创建了一个后台进程,默认日志输出到了nohup.out文件中,程序跑起来也就没再管,过了大约一周,发现硬盘空间不够了,于是查找原因,发现这个nohup.out文件已经到了70G了,导 ...

  2. 菜鸟-@responsebody 理解-用法

    @responsebody表示该方法的返回结果直接写入HTTP response body中一般在异步获取数据时使用,在使用@RequestMapping后,返回值通常解析为跳转路径,加上@respo ...

  3. DNS与BIND介绍

    前言 DNS(Domain Name System),网域名称系统,是互联网上基础性的服务.DNS 将域名和网络服务器的 IP 地址相互映射,并将这些数据保存至 DNS 服务器.两台主机通信事实上是依 ...

  4. Java读入优化

    之前被软院校赛卡了一波T,很亏啊.以下抄袭自Codeforces的神仙Petr. 可能得系统研究Java怎么写了?缺点是不能使用hasNext(),可能需要在main()中解决. import jav ...

  5. Phpstorm建立连接Wampserver的数据库

    phpstorm是一款php集成开发环境软件,集成了很多功能,不但有强大的代码编辑及调试功能,还能连接数据库.本文写的就是如何用phpstorm来建立访问wampserver数据库,查询输出数据,方便 ...

  6. iOS图标去掉阴影和反光

    在ios开发时, 程序的图标会被apple进行美化, 自动圆角, 加上阴影和反光效果: 如果有时候不想要阴影和反光,可以这样做: 在Info.plist中 添加一个Icon already inclu ...

  7. Java的12个语法糖【转】

    本文转载自公众号  Hollis 原创: 会反编译的 Hollis 侵权删 本文从 Java 编译原理角度,深入字节码及 class 文件,抽丝剥茧,了解 Java 中的语法糖原理及用法,帮助大家在学 ...

  8. VLAN-1-VLAN配置

    f0/12和f0/24不在列表中,因为它们动态地成为trunk,支持多个vlan       “unsup”意为这个2950交换机不支持FDDI和TR       首先 switchport mode ...

  9. python错误之UnicodeEncodeError: 'ascii' codec can't encode characters in position 7-8: ordinal not in range(128)

    # coding = ascii import jsonimport pickleimport sysimport os decode()和encode方法中第一个参数为编码格式,第二个为出现无法转换 ...

  10. C# 委托链、多路广播委托

    委托链.多路广播委托:也就是把多个委托链接在一起,我们把链接了多个方法的委托称为委托链或多路广播委托 例: class HelloWorld { //定义委托类型 delegate void Dele ...