文章目录
  1. 1. position定位
  2. 2. absolute和fixed的相同点
  3. 3. absolute和fixed的不同点
    1. 3.0.1. absolute
    2. 3.0.2. fixed
    3. 3.0.3. absolute
    4. 3.0.4. fixed
  • 4. 偏移量的设置
    1. 4.1. fixed定位
  • 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定位

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

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

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

    文章目录
    1. 1. position定位
    2. 2. absolute和fixed的相同点
    3. 3. absolute和fixed的不同点
      1. 3.0.1. absolute
      2. 3.0.2. fixed
      3. 3.0.3. absolute
      4. 3.0.4. fixed
  • 4. 偏移量的设置
    1. 4.1. fixed定位