面试官 🤔：CSS 中的 position 属性……

CSS 中的 position 属性用于指定一个元素在文档中的定位方式。它有以下几个常用值：

参考：developer.mozilla.org/zh-CN/docs/…

1. static（默认值）：

   • 元素按照正常的文档流进行布局
   • top、right、bottom、left 和 z-index 属性无效

2. relative：

   • 元素仍在正常文档流中
   • 可以使用 top、right、bottom、left 调整位置，相对于其正常位置进行偏移
   • 不影响其他元素的位置

3. absolute：

   • 元素脱离正常文档流
   • 相对于最近的非 static 定位祖先元素进行定位
   • 如果没有这样的祖先，则相对于初始包含块（通常是 ）
   • 可以使用 top、right、bottom、left 精确定位

4. fixed：

   • 元素脱离正常文档流
   • 相对于浏览器视口（viewport）进行定位
   • 即使页面滚动，元素位置也不变
   • 可以使用 top、right、bottom、left 精确定位

5. sticky：

   • 元素根据正常文档流进行定位，然后相对于其最近的滚动祖先和包含块进行偏移
   • 在特定阈值前为相对定位，之后为固定定位
   • 常用于实现粘性标题栏等效果

6. inherit：

   • 继承父元素的 position 值

7. initial：

   • 将 position 属性设置为默认值（即 static）

这些值的主要用途如下：

• static：用于移除已应用的定位，使元素回到文档的正常流
• relative：用于微调元素位置，或作为 absolute 定位子元素的参考点
• absolute：用于创建弹出框、工具提示、自定义下拉菜单等
• fixed：用于创建始终可见的页面元素，如页面顶部的导航栏
• sticky：用于创建在滚动时固定的元素，如分类标题或粘性广告

示例：

/* 相对定位，向下移动 10px，向右移动 20px */
.relative-example {
  position: relative;
  top: 10px;
  left: 20px;
}

/* 绝对定位，距离父元素顶部 50px，右侧 20px */
.absolute-example {
  position: absolute;
  top: 50px;
  right: 20px;
}

/* 固定在视口右下角 */
.fixed-example {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* 粘性定位，滚动到距离顶部 10px 时固定 */
.sticky-example {
  position: sticky;
  top: 10px;
}

选择合适的 position 值对于创建复杂的页面布局和交互元素至关重要。每种定位方式都有其特定的用途，理解它们之间的区别可以帮助你更好地控制页面元素的布局