1. 相对定位

• 特性：相对自身原始位置偏移，保留原始空间，不脱离文档流
• 实现方法：
  css

  .element {
    position: relative;
    top: 10px;    /* 向下偏移10px */
    left: 20px;   /* 向右偏移20px */
  }
  

2. 绝对定位

• 特性：相对最近的已定位父级元素，脱离文档流，可层叠
• 实现方法：
  css

  .element {
    position: absolute;
    top: 10px;    /* 距离参考容器顶部10px */
    left: 20px;   /* 距离参考容器左侧20px */
  }
  

3. 相对定位与绝对定位组合使用

3.1 实现步骤

1. 父容器设置相对定位：position: relative
2. 子元素设置绝对定位：position: absolute，并通过偏移属性相对于父容器定位

3.2 应用场景

• 导航菜单：下拉菜单相对于导航项定位
• 弹窗：弹窗相对于页面或父容器定位
• 图片水印：水印相对于图片定位

4. 固定定位

• 特性：相对视口定位，脱离文档流，位置固定
• 实现方法：
  css

  .element {
    position: fixed;
    bottom: 30px;
    right: 30px;
  }
  

5. z-index（层叠顺序）

• 作用：控制定位元素的层叠顺序，值越大越上层
• 实现方法：
  css

  .element {
    position: relative; /* 或 absolute, fixed */
    z-index: 10; /* 层叠顺序值 */
  }
  

• 注意事项：只对定位元素有效

记住子绝父相就行，然后就是fixed有时候要用，z-index偶尔也要用