- 红色表示 absolute块
- 父容器必须是relative, 否则这些块就以整个网页为参照物
- 定位和比例都是以参照物(父容器)计算, 比如: 100%指的是父容器的尺寸
- absolute的体积不计算到父容器中
- 蓝色表示 relative块
- 参照物为自身
- 占位不变(如图: 蓝色div和随后的绿色div之间有空隙, 后者仍用前者定位之前的所占位置计算)
- 体积计算到父容器中
container (position: relative to make the children's 'absolute' work)
content A without any position
Content B with relative position. It moves to left and above (according to itself) but its space remains. The height is caculated by its parent.
- position: relative (to itself)
- left: -30px
- top: -10px
content C without any position
content D with Absolute position. It moves to left and above (according to its parent) and its height won't be calcuated by its parent.
- position: absolute
- left: 100% (to its parent)
- top: -10px (to its parent)
content E with Absolute position, to its parent's bottom right.
- position: absolute
- right: 10px (to its parent)
- bottom: 10px (to its parent)
content F with Absolute position. It moves to right and above (according to its parent) and its height won't be calcuated by its parent.
- position: absolute
- right: 100% (to its parent)
- top: 250px (to its parent)
content G without any position
最新评论