CSS定位详解

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

一、定位与布局的区别

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

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

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

二、五种定位方式详解

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

（一）static 静态定位

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

position: static;

特点：

• 元素按照正常文档流排列。
• 不受 top