Position属性四个值：static、fixed、absolute和relative的区别和用法

Position属性四个值：static、fixed、absolute和relative的区别和用法

1. static（静态定位）

• 定义：默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
• 用法：适用于不需要特殊定位的元素，元素会按照正常的文档流进行排列。

2. relative（相对定位）

• 定义：生成相对定位的元素，通过 top, bottom, left, right 的设置相对于其正常（原先本身）位置进行定位。可通过 z-index 进行层次分级。
• 用法：

  元素脱离正常的文本流中，但其在文本流中的位置依然存在。

  参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点。

  配合 TRBL（top, right, bottom, left）进行定位，当父级内有 padding 等 CSS 属性时，当前级的原始点则参照父级内容区的原始点进行定位。

  可以用 TRBL 进行布局页面，但仍保留其作为普通元素在文档流中的位置。

3. absolute（绝对定位）

• 定义：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过 z-index 进行层次分级。
• 用法：

  元素脱离正常文本流，其在正常流中的位置不再存在。

  若没有 TRBL，以父级的左上角为原点进行定位（无父级时参照浏览器左上角）。

  若设定 TRBL，并且父级没有设定 position 属性，则以浏览器左上角为原点进行定位。

  若设定 TRBL，并且父级设定 position 属性（无论是 absolute 还是 relative），则以父级的左上角为原点进行定位，位置由 TRBL 决定，父级的 padding 对其不起作用。

  常用于将某个元素定位于属性为 absolute 的元素的内部某个位置。

4. fixed（固定定位）

• 定义：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过 z-index 进行层次分级。
• 用法：

  元素的位置相对于浏览器窗口固定，不随页面滚动而改变。

  常用于创建固定在屏幕某个位置的元素，如导航栏、返回顶部按钮等。

总结与对比

• static：元素按照正常的文档流进行排列，不进行特殊定位。
• relative：元素相对于其正常位置进行偏移，但仍保留在文档流中的位置。
• absolute：元素脱离文档流，相对于最近的非 static 定位祖先元素进行定位。
• fixed：元素相对于浏览器窗口进行定位，不随页面滚动而改变。

图片示例

• relative 定位示例：

  
  黄色背景的层定位为 relative，红色边框区域为其在正常流中的位置。在通过 top、left 对其定位后，从灰色背景层的位置可以看出其正常位置依然存在。

• absolute 与 relative 对比示例：

  
  红色背景层为 relative 定位，其直接父元素绿色背景层为默认的 static 定位。红色背景层的位置为相对绿色背景层 top、left 各 20 像素。而如果红色背景层定位为 absolute，则情形如下：
  
  红色背景层依然定义 top:20px；left:20px；但其相对的元素变为定位方式为 absolute 或 relative 的黄色背景层。

注意事项

• 使用 absolute 定位时，若父级元素没有 position 属性，则 absolute 元素会相对于 body 进行定位。
• relative 定位的元素可以用来布局页面，而 absolute 定位的元素通常用于定位某元素在父级中的位置。
• 绝对定位对象在可视区域之外会导致滚动条出现，而相对定位对象在可视区域之外则不会导致滚动条出现。
• z-index 属性用于设置元素的堆叠顺序，仅在元素具有定位属性（非 static）时有效。