DIV教程之CSS网页结构教程:相对定位和绝对定位

最新版本html5+CSS3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。
网页教授教养中心提醒：本文次要形貌XHTML中绝对定位和相对定位各自的实质、用法、区分和二者之间的干系。和利用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素举行结构的办法。
CSS网页结构教程:相对定位和绝对定位。经由过程本文你相对能了解相对定位和绝对定位了，假如你看完本篇文章还不睬解相对定位和绝对定位的话，我看你就别学CSS了！哈哈！
提要：
本文次要形貌XHTML中绝对定位和相对定位各自的实质、用法、区分和二者之间的干系。和利用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素举行结构的办法。(本文的示例，请看这个附件demo。)
申明：
占位空间：元素在文档流中所占有的空间。
物理空间：元素自己所占有的空间。
上面分3种情形分离对绝对定位和相对定位举行会商：
1.只利用css第一组属性结构定位元素的情形
2.只利用css第二组属性结构定位元素的情形
3.夹杂利用第一组和第二组属性的情形
为不决位时的初始效果，
层级干系为：
<div
<divbox1
<divbox2
<divbox3
最终效果：

登录/注册后可看大图

1、用绝对定位结构块级元素
元素设置position值：position:relative
此属性值的设置，元素没有离开文档流，仍是一般流定位模子的一部分，会对文档流中别的元素结构发生影响。（申明：蓝色代表占位空间，白色代表元素）
看到本信息，申明该文章来历于网页教授教养www.poluoluo.com，假如文章不完全请到网页教授教养poluoluo.com扫瞄！
1.仅利用left、right、top和bottom属性结构绝对定位元素的情形
元素底本所占的占位空间仍保存，物理空间偏移。
看到本信息申明该文是经由过程网页教授教养（poluoluo.com）收拾公布的，请不要删失落！
中，设置元素的left和top的值，对box2举行结构，能够发明除box2偏移以外，其他块级元素的地位没有被影响，可见box2的占位空间仍是存在的。
层级干系为：
<div
<divbox1
<divbox2——&ndash;position:relative;top:-60px;left:80px;
<divbox3
最终效果：

登录/注册后可看大图

2.仅利用margin属性结构绝对定位元素的情形
用margin-bottom属性和margin-top属性设置负值能够改动文档流中所占空间的高度，会影响文档流中的别的元素地位。比方：margin-top:负值;margin-bottom:负值
中，box1和box2都设置了元素margin-bottom的值，值即是它们高度的负值。box1和box2物理空间没有改动，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改动，占位空间高度稳定。再经由过程margin-left对box2和box3设置左偏移值。
层级干系为：
<div
<divbox1——&ndash;position:relative;margin-bottom:-102px;
<divbox2——&ndash;position:relative;margin-bottom:-102px;margin-left:110px;
<divbox3——&ndash;position:relative;margin-bottom:0px;margin-left:220px;
最终效果：

登录/注册后可看大图

3.夹杂利用left、right、top和bottom属性与margin属性结构绝对定位元素的情形
此情形，它们的值会发生累加的效果。在CSS2.1中一切的扫瞄器都利用外边距界限来完成偏移盘算。本文从数学的角度了解为偏移属性值和外边距属性值累加。
加此信息网页教授教养（poluoluo.com）公布目标是为了避免你变懒！poluoluo.com不主意收罗！
中，box2是在的基本上增添设置left的值发生的效果，可见margin-left的值和left的值发生了累加。(偏移量:80px=110px-30px)
层级干系为：
<div
<divbox1——-position:relative;margin-bottom:-102px;
<divbox2——-position:relative;margin-bottom:-102px;margin-left:110px;flet:-30px;
<divbox3——-position:relative;margin-bottom:0px;margin-left:220px;
最终效果：

登录/注册后可看大图

2、用相对定位结构块级元素
设置position值：position:absolute;
此属性值的设置，元素从文档流完整删除。
1.仅利用left、right、top和bottom属性结构相对定位元素的情形
相对定位的元素的偏移地位以比来的定位(包含绝对定位和相对定位)先人元素作参照物。假如元素没有已定位(包含绝对定位和相对定位)的先人元素，那末它的参照物为最顶级元素（因为扫瞄器的默许参照物分歧，物多是BODY或HTML元素）。
注重：IE下参照物需设置宽度或高度bottom和right属性才能够准确的定位。
设置元素为相对定位元素后，元素的Left、Right、Top和Bottom属性默许值不是0，只是将元素离开文档流。以下例子申明这个成绩。
在中，将橘黄色的先人元素设置为定位元素（即参照物），box2设为相对定位，文档流由box1-box2-box3变成box1-box3，可box2却没有挪动到间隔参照物0值的地位上，可见box2的Left、Right、Top和Bottom属性默许值不即是0，它只是离开了文档流罢了。
层级干系为：
<div———————————position:relative参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<divbox1
<divbox2——&ndash;absolute
<divbox3
最终效果：

登录/注册后可看大图

以比来的先人定位元素为参照物的情形
中，Box2设置成相对定位元素，离开了文档流，文档流由box1-box2-box3变成box1-box3，box2以比来的定位先人（蓝色框）为参照物。
本文是网页教授教养www.poluoluo.com搜集收拾大概原创内容，转载请说明出处！
层级干系为：
<div———————————position:relative;不是比来的先人定位元素，不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-position:relative参照物
<divbox1
<divbox2——&ndash;position:absolute;top:50px;left:120px;
<divbox3
最终效果：

登录/注册后可看大图

中，为改动参照物（橘色框）后的效果
层级干系为：
<div———————————position:relative;比来的先人定位元素，参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<divbox1
<divbox2——&ndash;position:absolute;top:50px;left:120px;
<divbox3
最终效果：

登录/注册后可看大图

中，参照物为最顶级的元素情形。
层级干系为：
<div———————————没有设置为定位元素，不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<divbox1
<divbox2——&ndash;position:absolute;top:50px;left:120px;
<divbox3
最终效果：

登录/注册后可看大图

2.仅利用margin属性结构相对定位元素的情形
此情形，margin-bottom和margin-right的值不再对文档流中的元素发生影响，由于该元素已离开了文档流。别的，不论它的先人元素有无定位，都是以文档流华夏来地点的地位上偏移参照物。
本文是网页教授教养www.poluoluo.com搜集收拾大概原创内容，转载请说明出处！
中，利用margin属性结构绝对定位元素。
层级干系为：
<div———————————position:relative;不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<divbox1
<divbox2——&ndash;position:absolute;margin-top:50px;margin-left:120px;
<divbox3
最终效果：

登录/注册后可看大图

IE6的情形下，box2后面没有兄弟节点，则margin-left的值会呈现双倍边距，见0。
层级干系为：
<div———————————position:relative;不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<divbox1
<divbox2——&ndash;position:absolute;margin-top:50px;margin-left:60px;
<divbox3
最终效果：

登录/注册后可看大图

0
3.夹杂利用left、right、top和bottom属性与margin属性结构绝对定位元素的情形
a.margin属性和top、bottom、left、right属性同时利用，假如统一偏向偏移，它们的值会发生累加的效果，见1。
本信息代表文章来历网页教授教养poluoluo.com请人人往www.poluoluo.com扫瞄！
比方：margin-left:120px;left:-20px;那末box2的偏移值为120px-20px=100px;
层级干系为：
<div———————————-不是参照物
<div—————————&ndash;不是参照物
<div———————&ndash;position:relative;参照物
<divbox1
<divbox2———position:absolute;margin-left:120px;left:-20px;top:50px;
<divbox3
最终效果：

登录/注册后可看大图

1
b.相对定位和绝对定位的累加加效果分歧，假如top、bottom、left、right属性和margin属性偏移的偏向相反，top、bottom、left、right属性值无效，反偏向的margin属性值有效，见2。
层级干系为：
<div———————————-不是参照物
<div—————————&ndash;不是参照物
<div———————&ndash;position:relative;参照物
<divbox1
<divbox2———position:absolute;margin-left:120px;right:10px;top:50px;
<divbox3
最终效果：

登录/注册后可看大图

2
总结：

• 绝对定位的元素不会离开文档流，占用文档流的空间，Left;Right;Top和Bottom属性与margin属性夹杂利用会发生累加效果。
  
• 相对定位的元素离开文档流，偏移不影响文档流中的别的元素，Left;Right;Top和Bottom属性与margin属性夹杂利用，偏移偏向不异值累加，偏向相反，margin属性值有效。
  
• 相对定位的元素以比来的定位先人元素为参照物。
  

最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

滚动条)层属性--溢出(visible/hidden/scroll/auto)

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

滚动条)层属性--溢出(visible/hidden/scroll/auto)