css深入理解relative

第一讲     relative和absolute相煎关系

同源性

.position:relative

.position:absolute

限制作用

1.限制left/top/right/bottom定位

2.限制z-index层级

3.限制在overflow下嚣张气焰

1.限制定位，如果没有relative限制，元素定位absolute会可以在任何地方定位

2.限制层级 z-index 层级越高

3.限制超越overflow

relative与fixed

同源性

.position:relative

.position:fixed

限制作用

限制层级

第二讲 relative和定位

1.相对自身

left/top是相对于自身的。

2.无入侵

不会影响到原来的布局

无侵入定位的作用：自定义拖拽

top/buttom 和left/right对立属性同时存在时的表现

1.绝对定位是拉伸

2.相对定位是斗争

第三讲relative和层级

1.提高层叠上下文

第四讲relative的最小化影响原则

所谓relative的最小化影响原则指的是尽量降低relative属性堆其他元素或布局的潜在影响！

1.尽量避免使用relative

absolute定位不依赖relative

2.relative最小化

position:absolute的元素外层加一个标签

外层加position:relative 是不会占据任何空间的。