一 相对定位position: relative;

1. 相对定位的参考点在哪里？

相对自己原来的位置

如下图所示

可以使用  left 、 right 、 top 、 bottom 四个属性调整位置。

示例（以上图片代码）

2. 相对定位元素的特点：
1. 不会脱离文档流，元素位置的变化（可以超出父元素范围），只是视觉效果上的变化，不会对其他元素产生任何影响。
2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是：
定位的元素会盖在普通元素之上。
都发生定位的两个元素，后写的元素会盖在先写的元素之上。
3.  left 不能和 right 一起设置（如果同时使用left和right, left 生效，right失效，跟代码位置无关）， top 和 bottom 不能一起设置如果同时使用top和bottom, top 生效，bottom失效，跟代码位置无关）。
4. 相对定位的元素，也能继续浮动，但不推荐这样做。
5. 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。

注意：绝大多数情况下，相对定位，会与绝对定位配合使用。

二 绝对定位position: absolute;

1.绝对定位的参考点在哪里？
参考它的包含块。

什么是包含块？
1. 对于没有脱离文档流的元素：包含块就是父元素；
2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都
没定位，那包含块就是整个页面）。

3D效果如下：

2.绝对定位元素的特点：
1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
2.  left 不能和 right 一起设置（如果同时使用left和right, left 生效，right失效，跟代码位置无关）， top 和 bottom 不能一起设置如果同时使用top和bottom, top 生效，bottom失效，跟代码位置无关）。
3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
4. 绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
5. 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。
何为定位元素？ —— 默认宽、高都被内容所撑开，且能自由设置宽高。比如<span>标签，本来是行内元素不能设置宽和高，如果设置了绝对定位之后就可以设置宽和高。

最后，牢记一句话：子绝父相（子元素设置为绝对定位，父元素设置为相对定位）！！！