- 限制定位:relative可限制absolute(top、bottom)
- 限制层级:使用z-index控制层级。
- 限制超越overflow:干掉absolute不受overflow:hidden(auto/scroll)限制的特性
- relative只能限制fixed的“限制层级”用处
- 两个特性:1、相对自身;2、无侵入
- 1、相对自身。relatvie是相对自身进行left、top;而absolute是相对直接限制他的父级元素进行定位。
- 2、无侵入:margin布局会影响布局,而relative布局是不会影响其他元素(占着坑)
- 相对定位中定义对立属性(top、bottom)时,不会拉伸,top>bottom,left>right
- relative的层叠上下文大于其他定位。
- 当relative元素的z-index为auto时,不会限制内部absolute元素的层级(不会创建层叠上下文),不包括ie6/7(很容易出bug)
- relative的最小化影响原则,指尽量降低relative属性对其他元素或布局的潜在影响。
- 1、尽量避免使用relative,absolute定位不依赖于relative,可以采用margin或padding进行精准定位,而不使用top
- 2、relative最小化。
Paste_Image.png