1：相对定位：position:relative;
如果设置偏移量 left:50px;top:50px; 元素原来的形状保持不变，在移动过程中会撑开浏览器（相对定位在移动的过程中是相对与自己原来的位置偏移的）
![]()
![]()
![]()
![]()
![]()
![]()
只给元素设置相对定位，不设置偏移量时，元素仍保持原来的状态不变；可以发现给元素设置相对定位，不会让其脱离文档流；
如果设置偏移量 left:50px;top:50px; 元素原来的形状保持不变，在移动过程中会撑开浏览器（相对定位在移动的过程中是相对与自己原来的位置偏移的）
2：绝对定位：position：absolution;
给元素设置绝对定位，不设置偏移量时，受绝对定位影响的元素会改变原来的外观（随内容的变化而变化），其后相邻的元素会占据它原来的位置（绝对定位完全脱离文档流）；而且受绝对定位影响的元素好像是“浮在”别的元素上面（实际是受其z-index属性的影响
；）
box2位于box3上层，把box3字样覆盖了
偏移时参照物的选取是关键
给绝对定位的元素设置偏移量时：由于绝对定是以包含块为基础的定为；所以偏移时要分两种情况讨论：
（1）：没有已定位的组先元素是。以<html>偏移参照为基准；（可以看到给box2设置偏移量以后，box2是相对于最外层html为参照偏移的，用调试工具可以看到是相对于html移动而不是相对于body移动）
（2）：有已定位的祖先元素时，以距其最近的已定位的祖先元素为参照基准
虽然demo中box为距其最近的父元素，但是由于box中没有设置定位信息，所以是以wrap为参照基准：
可见绝对定位偏移时，参照物的选取是关键；
另外在使用绝对定位布局的时候应该注意（1）父元素通常设置为相对定位，因为相对定位比较稳定；（2）在进行一列定宽一列不定宽的布局时，要注意固定宽度的高度要大于自适应宽度的列（因为选用绝对定位，元素脱离文档流，不具备撑开浏览器的功能）
就写到这吧，，还有很多不足，希望大家多多提出宝贵的意见
598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
