3、relative与absolute的主要区别:

首先,是上面已经提到过的在正常流中的位置存在与否。

其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。如图3:

图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute,则情形如图4:

可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:

除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。

详文参考:http://www.csschina.net/a/jc/css_709.html

【编辑推荐】

  1. 解读CSS中absolute与relative的区别和联系
  2. CSS 绝对定位属性absolute用法初探
  3. DIV CSS建站对浏览器兼容性和注意事项
  4. CSS2.0中page-break-after属性用法
  5. 解读DIV CSS网页布局中CSS无效十个原因
【责任编辑:程华权 TEL:(010)68476606】
内容导航



分享到:

收藏|打印|复制
关于absolute  relative  CSS的更多文章
 

ralitive absolute的更多相关文章

  1. 5-5 可视化库Seaborn-多变量分析绘图

      Parameters:¶ 参数 解释 变量 x,y,hue 数据集变量 变量名 date 数据集 数据集名 row,col 更多分类变量进行平铺显示 变量名 col_wrap 每行的最高平铺数 整 ...

  2. “fixed+relative==absolute”——对BFC的再次思考

    好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...

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

    1.static(静态定位):默认值.没有定位,元素出现在正常的文档流中(如果设置 top, bottom, left, right, z-index这些属性就不起做作了). 2.relative(相 ...

  4. [LeetCode] Longest Absolute File Path 最长的绝对文件路径

    Suppose we abstract our file system by a string in the following manner: The string "dir\n\tsub ...

  5. css使absolute相对于父容器进行定位而不是以body(为什么绝对定位(absolute)的父级元素必须是相对定位(relative))

    借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...

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

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

  7. 解决绝对定位div position: absolute 后面的<a> Link不能点击

    今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events ...

  8. ie a absolute bug

    给a设置position:absolute时,在IE下,尽管display:block;width:100%;height:100%,依然无法点击.但是加一个背景颜色就可以了.如果不需要背景,再把背景 ...

  9. 辨析relative与absolute

    谈起它们,想必大家都不陌生.relative,相对定位嘛:absolute,绝对定位嘛.但是它们到底是个啥东东呢? 看看w3c的定义,见下表 定位 含义 relative 元素框偏移某个距离.元素仍保 ...

随机推荐

  1. access的逻辑类型

    Alter TABLE [表名] ADD [新增字段] BOOLEAN或者Alter TABLE [表名] ADD [新增字段] YESNO 或者Alter TABLE [表名] ADD [新增字段] ...

  2. IOS客户端Coding项目记录(四)

    1:打开Xcode,然后闪退,报加载某库出现异常 如/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolc ...

  3. android开发之——获取相册图片和路径

    Android开发获取相册图片的方式网上有很多种,这里说一个Android4.4后的方法,因为版本越高,一些老的api就会被弃用,新的api和老的api不兼容,导致出现很多问题. 比如:managed ...

  4. GCD中的dispatch_semaphore的语法与作用

    (一)引入问题 当并行执行的处理更新数据时,会产生数据不一致的情况,有时应用程序还会异常结束,虽然使用Serial Dipatch queue和dispatch_barrier_async函数可避免这 ...

  5. Android线程管理(三)——Thread类的内部原理、休眠及唤醒

    线程通信.ActivityThread及Thread类是理解Android线程管理的关键. 线程,作为CPU调度资源的基本单位,在Android等针对嵌入式设备的操作系统中,有着非常重要和基础的作用. ...

  6. Service的生命周期&Service绑定方法

    服务的生命周期: 一.采用start的方式开启服务 生命周期如下: 开启服务: onCreate()--> onStartCommand() (onStart()过时了)---> onDe ...

  7. CoreAnimation-03-隐式动画

    简介 每个UI控件,默认自动创建一个图层(根图层),即每个UI控件对应于至少一个图层 可以手动创建图层,这些图层为非根图层 对非根图层的某些属性(标记为Animatable的属性)进行修改,默认会自动 ...

  8. C语言-06-复杂数据类型

    一.数组 1> 数组的定义和初始化 定义 ① 数组定义了同种类型数据的集合 ② 定义数组时,数组必须有固定的长度 初始化 ① 如果在定义数组时,初始化数组,数组元素的个数必须是常量 ② 如果不在 ...

  9. iOS开发之网络数据解析(二)--XML解析简介

    前言:本篇随笔介绍的是XML解析. 正文: 1.XML解析方式有2两种: DOM:一次性将整个XML数据加载进内存进行解析,比较适合解析小文件 SAX:从根元素开始,按顺序一个元素一个元素往下解析,比 ...

  10. iOS开发网络篇—搭建本地服务器(待整理)

      一.简单说明 说明:提前下载好相关软件,且安装目录最好安装在全英文路径下.如果路径有中文名,那么可能会出现一些莫名其妙的问题. 提示:提前准备好的软件 apache-tomcat-6.0.41.t ...