相对定位和绝对定位

说明：
占位空间：元素在文档流中所占据的空间。
实际位置：元素本身所占据的空间。

  

一、用相对定位布局块级元素
元素设置position值： position:relative
此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分

 

1.仅使用left、right、top和bottom属性布局相对定位元素的情况

元素原本所占的占位空间仍保留，实际位置偏移。其他块级元素的位置没有被影响。

<div
   <div box1
   <div box2 ——– position:relative ; top:-60px; left:80px;
   <div box3

 

 

2.仅使用margin属性布局相对定位元素的情况
用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。

下图中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2实际位置没有改变，占位空间高度为0。

box3的margin-bottom值设置为0，实际位置没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。

ps：margin-bottom:负值，可以看做本身位置不变，让其下面的元素上来。

<div
   <div box1 ——– position:relative ; margin-bottom:-102px;
   <div box2 ——– position:relative ; margin-bottom:-102px; margin-left:110px;
   <div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px;

 

 

二、用绝对定位布局块级元素
设置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———————-没有设置为定位元素，不是参照物
       <div box1
       <div box2 ——–absolute
       <div box3

 

 

2.仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。

层级关系为：
<div ——————————— position:relative; 不是参照物
   <div—————————-没有设置为定位元素，不是参照物
     <div———————-没有设置为定位元素，不是参照物
       <div box1
       <div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
       <div box3