定位position

display用于描述一个元素应该生成怎么样的框类型, 而position则描述这个框的位置显示在何处, 以及它的布局对周围框的影响.

概览

  • static 默认值, 未定位的unpositioned, 其它各属性值都称positioned
  • relative相对定位, 在通常位置上进行偏移
  • absolute绝对定位, 相对最近的positioned祖先来固定位置
  • fixed 固定定位, 相对窗口来固定位置
  • inherit 继承父元素的position值

通过top, bottom, left, right属性, 可以设置相对某个位置的偏移量.

static

静止, 未定位, unpositioned, 是默认值, 可以理解为none. 相对的, 其它属性都称为positioned

static框遵循普通流Normal Flow, 所以忽略top, bottom, left, right属性.

relative

relative框也仍然遵循普通流, 只是相对于它平时的位置进行偏移, 不设置偏移量就表现得跟static一样.

它跟使用margin来定义外边距实现的效果类似, 但又不同, 其它元素并不会知道relative框偏移了位置, 就好像它还在原地(遵循普通流), 不会自动去让出位置或补全空隙.

absolute

absolute框脱离普通流, 固定在某个位置, 只是仅相对于最近的被定位过positioned的祖先.

它会向外不断找祖先, 如果没有这样的祖先, 那就以body为祖先, 固定在屏幕上, 但是会随着页面滚动而移动.

fixed

fixed可以视为是absolute的特例, 表示相对于窗口固定, 固定元素的位置, 且无视页面滚动, 总是处于该位置.

但是需要注意, 移动浏览器对fixed的支持不好.

引申 z-index

z-index并不是position的属性值, 但z-index只对positioned框有效, 所以顺带记录.

z-index定义框的堆叠顺序, 不妨理解为图层. 值越高, 显示顺序越优先, 越上层. 当 z-index 值相同时, 后加载的元素显示优先.

References