absolute的英文意思是绝对的意思,实际上是针对父级元素元素定位,如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位，按照我们中国人的理解观念，这个其实是相对定位，是脱离文档流的。用了abolute属性，原有float属性将失效；
relative的英文意思是相对的意思，实际上是相对于对象当前位置的定位。而且是不脱离文档流的，就算用top、lef、bottom、right或margin将其移动位置，它也会在原来的文档流中占有自己实际大小的一块位置。
说白了，absolute是相对于父对象定位，relative是相对于当前位置定位！就是这么简单

关于absolute 和 relative 定位的定义的更多相关文章

  1. focus、click、blur、display、float、border、absolute、relative、fixed

    onfocus:获取焦点,点击时,按着不放 onclick:点击松开之后,未点击其他处 onblur:点击松开之后,又点击其他处 display:block,none,inline block:单独占 ...

  2. 定位 absolute和relative比较

    absolute:脱离原来位置定位.是相对于最近的有定位的父级进行定位;如果没有有定位的父级元素,就相对文档进行定位 relative:保留原来位置进行定位,相对于自己原来的位置进行定位 下面举两个例 ...

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

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

  4. position属性absolute与relative 详解

    最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...

  5. position属性absolute和relative理解

    relative:相对于自身静态位置进行定位,不脱离流. absolute:绝对定位,脱离流,如果父元素定义了position属性,无论是absolute.relative还是fixed,都是相对于父 ...

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

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

  7. position的absolute与fixed，absolute与relative共同点与不同点

    absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absol ...

  8. CSS中position的absolute和relative用法

    static: HTML元素的默认定位方式 absolute: 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠通过z-index属性定义.绝对定位的元 ...

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

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

随机推荐

  1. python 查找指定内容的txt文件

    程序设计思路:1. 利用os.walk()找出所有的文件;2.利用正则找到指定后缀的文件:3.找到需要的txt文件后,通过open().readlines()读取文件中每行数据;4.读取后,保存正则匹 ...

  2. babel 解构赋值无法问题

    这个东西需要第二级, babel-preset-stage-2,然后再presets里引入stage-2的设置,再plugins离引入对应的插件 { "presets": [&qu ...

  3. java htmlunit 抓取网页数据

    WebClient webClient=new WebClient(BrowserVersion.CHROME); webClient.setJavaScriptTimeout(5000); webC ...

  4. ES数据-MySql处理Date类型的数据导入处理

    用ES的小伙伴们,相信大家都遇到过Mapping处理Date类型的数据头疼问题吧. 不用头疼了,我来给你提供一种解决方案: 1.Maping定义为: {  "mappings": ...

  5. Web App适配不同屏幕的几点建议

    安卓设备在屏幕尺寸和像素密度上差别很大,因此在使用WebView加载网页时就需要考虑到这种差别,对我们的网页做出精心的设计以在不同的屏幕上都能得到合适的展现.通常情况下,我们需要考虑到两个因素:1.视 ...

  6. Cenots7编译Opencv3.1错误：下载ippicv，解决方案

    在centos7上安装Opencv的时候,停在了下载ippicv的地方,一直都下载不下来. ippicv是一个并行计算库,其实可以不用的. 如果不想用这个并行计算库,在做Cmake的时候用参数关闭即可 ...

  7. ROCKETMQ源码分析笔记2：client

    CLIENT 之前讲过tools里面有大量调用client的东西.为了从源码层面了解rocket,决定啃下client这块骨头. pom 先看pom,看看CLIENT依赖谁.看完后原来是依赖commo ...

  8. AChecker + Selenium2对需要登录的页面进行自动化可访问性测试

    前言:这段时间还算比较空闲,我准备把过去做过的有些形形色色,甚至有些奇怪的研究总结一下,也许刚好有人用的着也不一定,不枉为之抓耳挠腮的时光和浪费的电力.   名词解释: 网站可访问性测试:国内基本没有 ...

  9. Linux系统结构

        Linux系统一般有4个主要部分: 内核.shell.文件系统和应用程序.内核.shell和文件系统一起形成了基本的操作系统结构,它们使得用户可以运行程序.管理文件并使用系统.部分层次结构如图 ...

  10. Spring MVC视图解析器

    Spring MVC提供的视图解析器使用ViewResolver进行视图解析,实现浏览器中渲染模型.ViewResolver能够解析JSP.Velocity模板.FreeMarker模板和XSLT等多 ...