#CSS

======================================================

1. 相对定位

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

• 实现方法：

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

======================================================

2. 绝对定位

• 特性：相对最近的已定位祖先元素，脱离文档流，可层叠

• 实现方法：

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

======================================================

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

3.1 实现步骤

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

3.2 应用场景

• 导航菜单：下拉菜单相对于导航项定位

• 弹窗：弹窗相对于页面或父容器定位

• 图片水印：水印相对于图片定位

======================================================

4. 固定定位

• 特性：相对视口定位，脱离文档流，位置固定

• 实现方法：

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

======================================================

5. z-index（层叠顺序）

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

• 实现方法：

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

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

======================================================