一直没有弄懂相对定位与绝对定位之间的关系，今天特来学习一下。本实践都是在360浏览器下测试所得。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style type="text/css">

 .hv

{

position:relative;

left:100px;

top:150px;

}

 .hv2

{

position: absolute;

left:100px;

top:150px;

}

h2{ background-color:gray;}

p{background-color: red;}

</style>

<title>

last

</title>

</head>

<body>

<h2 class="hv2">This is a heading  an absolute position This is a heading  an absolute positionThis is a heading  an absolute positionThis is a heading  an absolute position</h2>

<p>With absolute positioning, an element can be placed anywhere 方法on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>

</body>

</html>

获得html高度是68px=p元素高度+margin=36px+16px+16px=body高度+p的margin=36px+16px+16px

获得body高度是36px=p元素高度=36px

获得h2高度是54px margin 20px

获得p高度是36px margin 16px

修改一下把样式改成hv 即position:relative 则

获得html高度是146px=body高度+h2 顶部margin +p底部 margin=110px+20px+16px

获得body高度是 110px=h2高度+p元素高度+h2与p元素之间的margin=54px+36px+20px=110px

获得h2高度是54px margin 20px

获得p元素高度是36px margin 16px

不设置样式即默认

获得html高度是146px=body高度+h2 顶部margin +p底部 margin=110px+20px+16px

获得body高度 110px=h2高度+p元素高度+h2与p元素之间的margin=54px+36px+20px=110px

获得h2高度 54px margin 20px

获得p元素高度 36px margin 16px

得出结论：

position:relative 可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

position:absolute 定位使元素的位置与文档流无关，因此不占据空间。

相对定位占空间，绝对定位不占空间

参考：http://www.runoob.com/css/css-positioning.html

相关博文：http://blog.csdn.net/dyllove98/article/details/8967114

Relative 定位与Absolute 定位实例的更多相关文章

  1. fixed定位与absolute定位

    相同点: 1.fixed定位和absolute定位都是绝对定位 2.fixed定位和absolute定位都脱离了标准文档流, 3.未设置偏移量时,都定位在父元素的左上角 tip:元素设置相对定位或绝对 ...

  2. position:relative/static/fixed/absolute定位的区别以及使用场景

    absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...

  3. CSS 相对|绝对(relative/absolute)定位系列（一）

    一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...

  4. relative 和 absolute 定位关系

    问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative  相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置rela ...

  5. CSS 相对/绝对(relative/absolute)定位系列（四）——张鑫旭

    前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...

  6. position 的值absolute、fixed、relative和static的定位原点是什么

    position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自 ...

  7. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

  8. 通过案例理解position:relative和position:absolute

    w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:abso ...

  9. fixed 和 absolute 定位的区别

    fixed:固定定位           absolute:绝对定位 在没有滚动条的情况下两者其实没有差异.但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高 ...

随机推荐

  1. imx6 生成 spi设备节点

    开发板需要使用spi接口,但是spi接口被touch占用,使用event进行操作.所以需要更改配置,生成spi设备节点. 参考链接 https://community.nxp.com/thread/3 ...

  2. sdut2169:Sequence(dp)

    题目:http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2169 #include <iost ...

  3. Linux 中的零拷贝技术，第 1 部分

    概述 本系列由两篇文章组成,介绍了当前用于 Linux 操作系统上的几种零拷贝技术,简单描述了各种零拷贝技术的实现,以及它们的特点和适用场景.本文是本系列文章的第一部分,主要是介绍一些零拷贝技术的相关 ...

  4. rsync传输性能测试总结 转

    测试环境 1．1服务器硬件信息 1．2 服务器软件信息 1．3 Rsync所能够支持的功能 (1)支持断点续传 (2)支持使用ssh传输加密 (3)支持128位MD4校验(3.0以后版本使用MD5加密 ...

  5. [BS-02] iOS数组、字典、NSNumber 新写法—— @[]、@{}

    IOS数组.字典.NSNumber 新写法—— @[].@{}   //标准写法 NSNumber * number = [NSNumber numberWithInt:]; NSArray * ar ...

  6. AngularJs赋值问题

    $scope.showUpgradeForm = function(item){ $scope.upgrade = item; $scope.upgrade.vercode++; // 其它操作 } ...

  7. 三层交换机+二层交换机配置VLAN相互访问

    使用思科模拟软件Cisco Packet Tracer Student,软件功能有限,只能架设简单的网络架构,适合初学者使用.

  8. cookie&session&servletContext

    一.cookie VS session 1)应用场景 cookie可以用于: 记录用户上次登录的时间 记住用户名和密码 session可以用于: 防止非法登录(即直接跳转到本来需登录验证方可登录的页面 ...

  9. Lintcode: Merge Sorted Array II

    Merge two given sorted integer array A and B into a new sorted integer array. Example A=[1,2,3,4] B= ...

  10. 转：Tomcat配置

    一.修改Tomcat端口号步骤: 1.找到Tomcat目录下的conf文件夹 2.进入conf文件夹里面找到server.xml文件 3.打开server.xml文件 4.在server.xml文件里 ...