1. 父元素 relative定位会限制子元素absolute:
- 限制 left/top/right/bottom 定位。
- 限制绝对定位 z-index,有相对定位的时候,z-index以相对定位为主。相对定位的z-index 不为 auto。
- 限制绝对定位不受overflow影响的特性。绝对定位在普通元素下,
overflow:scroll;
或overflow:hidden;
无法限制。但在相对定位的元素下,绝对定位乖乖听话。
2. relative left:100px;top:100px
相对于自身定位。
3. relative 中 left/right, top/bottom 同时存在时,left , top 为准。
绝对定位中是拉伸。
4. relative 与 z-index 层级。
- relative 可直接提高 z-index 层级。
5. 使用原则
- 减少使用 relative
- 在最直接,最小的元素上单独使用 relative,可在相应元素外包一层relative 定位的元素,不用在无关外面包裹一层 relative 定位的元素,要做到可控、细致。这样才不会在页面复杂的情况下,或后期要修改的时候出令人费解的问题。