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. Azure Web Site 之 利用Azure Web site 发布网站

    由于经常混迹于MSDN Azure论坛,少不了和一些外国朋友打交道.有的时候觉得还是有一些东西可以写出来与外国友人们分享下的, 所以就用一个开源项目建了一个英文blog项目. 在发布的时候,首选的就是 ...

  2. [JS]jQuery,javascript获得网页的高度和宽度

    [JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...

  3. 从svn资源库目录checkout出maven项目方法

    从svn资源库目录checkout出maven项目方法,如下图所示:

  4. Microsoft.CompactFramework.CSharp.targets not found

    今天打开VS2008的智能设备项目,报以下错误,应该是文件找不到了. The imported project "C:\WINDOWS\Microsoft.NET\Framework\v3. ...

  5. Breeze库API总结(Spark线性代数库)(转载)

    导入 import breeze.linalg._ import breeze.numerics._ Spark Mllib底层的向量.矩阵运算使用了Breeze库,Breeze库提供了Vector/ ...

  6. 什么是Unicode letter

    起因:从一段代码说起 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...

  7. thinkphp相关总结

    1.model层验证多个字段唯一性 protected $_validate = array( array('appid,awardid', '', '不能重复添加', self::MUST_VALI ...

  8. 类型转换bin()、chr()、ord() 、int()、float()、str()、repr()、bytes()、tuple(s )、 list(s )   、unichr(x ) 、 ord(x )  、 hex(x )  、          type()数据类型查询

    1.bin() 将整数x转换为二进制字符串,如果x不为Python中int类型,x必须包含方法__index__()并且返回值为integer: 参数x:整数或者包含__index__()方法切返回值 ...

  9. How To Install Java on CentOS and Fedora

    PostedDecember 4, 2014 453.8kviews JAVA CENTOS FEDORA   Introduction This tutorial will show you how ...

  10. GridView数据绑定

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...