position定位

position共有三种形式的定位:绝对定位、相对定位和静态定位。

position属性值:

static: 静态定位(default)
relative: 相对定位
absolute: 绝对定位
fixed: 固定定位

注意:absolute和fixed都是绝对定位形式。
绝对定位:完全脱离标准流,兄弟元素不再受其影响。

absolute和fixed的相同点

  1. 完全脱离标准流
  2. 未设置偏移量时,都定位在父元素的左上角(第四象限)
  3. 与父包含块设置postition:relative与否没有关系,初始位置总是在父元素的左上角。

偏移量:元素设置定位(绝对或相对)后就具有偏移属性和堆叠属性(z-index)

absolute和fixed的不同点

一、当设置偏移量时,偏移参照基准

absolute

  1. 无已定位的祖先元素,以为基准偏移
  2. 有已定位的祖先元素,以距其最近的、已定位的祖先元素为基准偏移

fixed

  1. 无论有、无已定位的祖先元素,都以浏览器可视窗口为基准偏移。

二、表现形式(产生滚动条时)

absolute

  1. 位置会随滚动条变化

fixed

  1. 位置固定,不会随滚动条变换
  2. 被它遮盖的元素,可以从其下方穿过

偏移量的设置

在对元素设置固定定位(fixed)时,如果希望本元素包含在其父包含块中,则不需要对齐设置偏移量。

fixed定位

定位形式——绝对定位
特点:位置固定不变,兄弟元素会从其下方穿过

未设置偏移量:
有已定位的祖先元素时,以祖先元素为基准
无已定位的祖先元素时,以浏览器窗口为基准

设置偏移量时:
无论有无以定位的祖先元素,都已浏览器窗口为基准偏移。