relative,CSS position: 一张图搞定absolute和relative

on 2011-9-23 in 博文摘选 | 0 Comment
CSS position: 一张图搞定absolute和relativerelative
  • 红色表示 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.
  1. position: relative (to itself)
  2. left: -30px
  3. 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.
  1. position: absolute
  2. left: 100% (to its parent)
  3. top: -10px (to its parent)
content E with Absolute position, to its parent's bottom right.
  1. position: absolute
  2. right: 10px (to its parent)
  3. 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.
  1. position: absolute
  2. right: 100% (to its parent)
  3. top: 250px (to its parent)
content G without any position

Tags:  absolute relative

延伸阅读

最新评论

发表评论