在前端开发中，CSS 定位（positioning）是一个核心概念，它决定了元素在页面上的位置和布局方式。无论是构建复杂的交互界面，还是实现简单的页面排版，CSS 定位都是不可或缺的工具。本文将全面介绍 CSS 中的五种定位方式，帮助你深入理解每种定位方式的特点和应用场景。

一、定位与布局的区别

在深入探讨定位之前，我们需要明确定位和布局是两个不同的概念：

• 布局：针对整个页面的结构设计，如两栏布局、三栏布局等。
• 定位：针对单个元素的位置控制，决定元素在页面上的精确位置。

理解这两者的区别，有助于我们在开发中更好地运用 CSS 定位。

二、五种定位方式详解

CSS 提供了五种定位方案，每种都有其独特的特性和使用场景。

（一）static静态定位

静态定位是元素的默认定位方式，遵循标准文档流。

特点：

• 元素按照正常文档流排列。
• 不受 top、bottom、left、right属性影响。
• 块级元素独占一行，内联元素共享一行。

应用场景：

- 适用于大多数默认的页面元素，不需要特殊定位的情况。

（二）relative相对定位

相对定位让元素相对于其原始位置进行偏移。

特点：

• 不脱离文档流，原位置仍被保留。
• 通过 top、bottom、left、right进行微调。

应用场景：

• 用于局部调整元素位置，同时不影响页面的整体布局。
• 作为绝对定位元素的父级容器，控制子元素的定位基准。

（三）absolute绝对定位

绝对定位使元素脱离文档流，相对于最近的已定位祖先元素定位。

特点：

• 完全脱离文档流，不影响其他元素的布局。
• 行内元素设置绝对定位后会变为块级元素。

应用场景：

• 用于创建弹出层、下拉菜单、模态框等需要精确控制位置的元素。
• 适用于需要脱离文档流的布局，如全屏背景、固定侧边栏等。

（四）fixed固定定位

固定定位是特殊的绝对定位，相对于浏览器视口定位。

特点：

• 脱离文档流，滚动页面时位置不变。
• 常用于固定导航栏、返回顶部按钮等。

应用场景：

• 用于创建固定在页面顶部或底部的导航栏、工具栏等。
• 适用于需要在滚动过程中始终可见的元素。

（五）sticky粘性定位

粘性定位是相对定位和固定定位的混合。

特点：

• 在阈值范围内表现为相对定位，超过阈值后变为固定定位。
• 必须指定至少一个阈值（top、bottom、left或 right）。
• - 父元素 overflow必须为visible。
• - 父元素高度不能低于 sticky 元素。

应用场景：

• 用于创建吸顶导航栏、侧边栏等。
• 适用于需要在滚动过程中“粘”在页面顶部或底部的元素。

三、实际应用技巧

（一）“子绝父相”原则

当需要绝对定位一个元素时，通常将其父元素设为相对定位。这样，绝对定位的子元素就会相对于父元素定位，便于控制。

（二）粘性定位的兼容性

虽然现代浏览器都支持粘性定位，但在一些旧版本浏览器中可能需要 polyfill。可以使用 [Stickyfill](
https://github.com/wilddeer/stickyfill) 等库来兼容旧浏览器。

（三）z-index控制层级

定位元素可以使用z-index属性控制堆叠顺序，数值越大越靠前。

四、常见面试题解答

（一）position有哪些值，各自的用法如何？

CSS 中有五种定位方案：

1. static：默认值，元素按正常文档流排列。

2.relative：相对自身原始位置偏移，不影响其他元素。

3.absolute：脱离文档流，相对于最近定位祖先元素定位。

4. fixed：脱离文档流，相对于浏览器视口固定。

5. sticky：在阈值内相对定位，超过阈值后固定定位。

（二）相对定位、绝对定位、固定定位的区别？

相对定位：相对于自身偏移，不脱离文档流。

绝对定位：相对于最近定位祖先，完全脱离文档流。

固定定位：相对于视口固定，脱离文档流，滚动时不移动。