Relative 定位与Absolute 定位实例
一直没有弄懂相对定位与绝对定位之间的关系，今天特来学习一下。本实践都是在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 定位实例的更多相关文章
- fixed定位与absolute定位
相同点: 1.fixed定位和absolute定位都是绝对定位 2.fixed定位和absolute定位都脱离了标准文档流, 3.未设置偏移量时,都定位在父元素的左上角 tip:元素设置相对定位或绝对 ...
- position:relative/static/fixed/absolute定位的区别以及使用场景
absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...
- CSS 相对|绝对(relative/absolute)定位系列（一）
一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
- relative 和 absolute 定位关系
问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative 相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置rela ...
- CSS 相对/绝对(relative/absolute)定位系列（四）——张鑫旭
前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...
- position 的值absolute、fixed、relative和static的定位原点是什么
position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自 ...
- CSS学习摘要-定位实例
CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...
- 通过案例理解position:relative和position:absolute
w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:abso ...
- fixed 和 absolute 定位的区别
fixed:固定定位 absolute:绝对定位 在没有滚动条的情况下两者其实没有差异.但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高 ...
随机推荐
- imx6 关闭 otg host
参考文档: http://www.cnblogs.com/zengjfgit/p/4711336.html make menuconfig 去掉Support for DR host port on ...
- A股中为什么有涨幅超过10%的
在A股规定涨跌幅10%的正常交易日中,某些股票的涨跌幅却超出或没达到10%的,原因是因为A股的交易中最小的价格“申报单位为0.01元”,就是说某些股票不管什么价格都不会刚刚好是10%,它只能“取最近于 ...
- mysql中文乱码问题
1.mysql客户端在插入中文字符的时候可能出现乱码问题. 原因: 要解决字符集的问题,首先要知道现在的系统.数据库.表.客户端等使用什么样的字符集,以及系统支持什么字符集等. 2.我百度了好多,说 ...
- axis2 WebService的发布与调用
1:准备: JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk6downloads-1902814.html e ...
- HTTPS and the TLS handshake protocol阅读笔记
目的 为能够透彻理解HTTPS报文交互过程,做此笔记. 本文大部分内容来自 : http://albertx.mx/blog/https-handshake/ http://www.cnblogs.c ...
- Oracle官方文档在线查看
1.9i Oracle官方文档在线查看 http://www.oracle.com/pls/db92/homepage 2.10g Oracle官方文档线查看 http://www.oracle.co ...
- jdk与eclipse版本问题解决applet的启动
今天在中韩,遇到一个保全项目,需要调用applet显示打印批单,结果IE一直显示安全设置问题,去java程序的安全里面想下调等级,不好调,所以想改个jdk_32试试. 版本环境 原先是eclipse_ ...
- Leetcode: Number of Islands II && Summary of Union Find
A 2d grid map of m rows and n columns is initially filled with water. We may perform an addLand oper ...
- SQL 数据库备、还，附、分，数据查询，聚合函数
认识数据库备份和事务日志备份 数据库备份与日志备份是数据库维护的日常工作,备份的目的是在于当数据库出现故障或者遭到破坏时可以根据备份的数据库及事务日志文件还原到最近的时间点将损失降到最低点. 数据库备 ...
- JAVA开发Web Service几种框架介绍
郑重声明:此文为转载来的,出处已不知了,侵告删. 在讲Web Service开发服务时,需要介绍一个目前开发Web Service的几个框架,分别为Axis,axis2,Xfire,CXF以及JWS( ...