absolute:当使用时，表示在文档流中没有实际存在位置（浮动），在不设置任何方位值时，只能按兵不动，当设置了方位值之后，会紧接着去寻找距离最近的能够将它包含住的父级元素，然后进行定位。

relative:当使用时，表示在文档中确实占有一定的空间，在不设置任何方位值时，会出现在应该出现的位置（空间），当设置了方位值之后，会在应该出现的位置上进行上、下、左、右的形状位移，而实际上还是占有应该占有的位置（空间）

css 布局absolute与relative的区别的更多相关文章

  1. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  2. css absolute与relative的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Div CSS absolute与relative的区别小结

    absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...

  4. css中的position 的absolute和relative的区别（转）

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  5. css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...

  6. position属性absolute与relative 的区别

    连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以 ...

  7. CSS position: absolute、relative定位问题详解

    CSS2.0 HandBook上的解释:  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...

  8. Position属性四个值：static、fixed、absolute和relative的区别

    1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative(相对定位):生成相对 ...

  9. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

随机推荐

  1. mysql简单性能排查

    mysql> show variables; mysql> show processlist; mysql> show status; mysql> show global s ...

  2. 在gradle 中使用ant 执行 “命令行”（CMD）不出日志解决方案

    因为gradle 好恶心,声明的任务,一定会事先运行一次,而任务追加的话就不会 例如: task hello(){ println "HelloWorld" } task hell ...

  3. OpenStack云计算（二）——OpenStack 计算

    http://www.ibm.com/developerworks/cn/cloud/library/cl-openstack-nova-glance/

  4. ecshop 进入后台登录帐号出现乱码解决方法

    进入后台登录帐号出现如果生成乱码 MySQL server error report:Array ( [0] => Array ( [message] => MySQL Query Err ...

  5. C#标准响应数据

    public HttpResponseMessage UpdateModule(Mode mode) { var response = Process.Instance.ExecuteString(( ...

  6. 结合使用saiku、mondrian workbentch建立多维查询报表

    1.简介 前几篇博客已经介绍了saiku.mondrian.MDX和模式文件他们之间的关系,那么如何将它们串联起来,供产品人员使用哪?下面咱们一步一步的实现 2.建立数据表 建表语句参考:http:/ ...

  7. WebDriver基本API使用手册(基于Java和C#)

    WebDriver基本API使用手册(基于Java和C#) http://www.docin.com/p-747728551.html

  8. WIN8 下Cisco VPN连接 出现vpn 422 failed to enable virtual adapter错误

    今天在家用VPN软件连接,出现了“vpn 422 failed to enable virtual adapter”的错误,系统安装的是Win8专业版32位,百度了半天又很多方法解决不了,后来发现了一 ...

  9. 优酷、YouTube、Twitter及JustinTV视频网站架构设计笔记

    本文是整理的关于优酷.YouTube.Twitter及JustinTV几个视频网站的架构或笔记,对于不管是视频网站.门户网站或者其它的网站,在架构上都有一定的参考意义,毕竟成功者的背后总有值得学习的地 ...

  10. unity web player的debug和log信息

    win8模式下 unity web player的报错信息在如下目录下:C:\Users\xxx\AppData\Local\Temp\UnityWebPlayer\log 注:目录里的文件可能被隐藏 ...