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 相对于自身定位。
margin-top 后续元素跟随，top定位不跟随
3. relative 中 left/right, top/bottom 同时存在时，left , top 为准。
绝对定位中是拉伸。
4. relative 与 z-index 层级。
- relative 可直接提高 z-index 层级。
z-index 不为 auto
z-index 为 auto，本不应该限制 第二个楼梯的绝对定位元素
5. 使用原则
- 减少使用 relative
- 在最直接，最小的元素上单独使用 relative，可在相应元素外包一层relative 定位的元素，不用在无关外面包裹一层 relative 定位的元素，要做到可控、细致。这样才不会在页面复杂的情况下，或后期要修改的时候出令人费解的问题。
网友评论