css的相对定位和绝对定位笔记

html代码如下：

<div class="div1">

<div class="div2"></div>

</div>

关于绝对定位：

图一：div2：position：absolute；

div1无操作。

图二：div2 div2：position：absolute；

div1：position：absolute；

两图对比，1，使用绝对定位的盒子以她的“最近”的一个“已经定位”的“祖先元素”为基准进行定位，如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。（所谓已经定位的元素含义是，position属性被设置。）

2，绝对定位的框从标准流中脱离，这意味着他们对其他的兄弟盒子的定位没有影响。例如

给div加一个padding：30px 30px;（不受padding的影响）

关于相对定位：

图三：div1 未设置，div2：position：relative；

（如果设定了trbl,并且父级没有设定position属性，子元素仍旧以父级的左上角为原点进行定位（这和absolute不同））

图四：div1：position：absolute；

div2：position：relative；

（设定trbl,并且父级设定position属性（无论是absolute还是relative），都以父级左上角为原点进行定位，位置由trbl决定。

若父级有设置padding，那么就以内容区的左上角为原点进行定位（这一点和absolute又不一样。））

由图三图四总结出，相对定位总是以父级左上角为原点进行定位的，如果父级不存在，则以浏览器左上角进行定位。

**注意：一些结论来源于网上， 若侵权请联系马上删除。