如何通过CSS定位属性精确调整网页元素的显示位置？

本文共计1017个文字，预计阅读时间需要5分钟。

设置元素定位方式，核心是 `position` 属性。它本身不独立使用，必须配合 `top`、`right`、`bottom`、`left` 等属性才能正确控制位置。

常见取值有五个，但实际高频使用的是四个：

• static：默认值，元素按文档流排列，top/left 等偏移属性完全无效
• relative：相对自身原本位置偏移，原占位空间保留，不影响其他元素布局
• absolute：脱离文档流，相对于最近的「已定位祖先元素」（即 position 不为 static）定位；若无，则相对于初始包含块（通常是视口）
• fixed：也脱离文档流，但始终相对于视口定位，滚动时位置固定
• sticky：条件式定位，表现为 relative 和 fixed 的结合体，触发临界点（如 top: 0 进入视口）后才“粘住”

为什么设置了 position 却没效果？

最常见原因是：只写了 position: absolute，但没写 top、left 等偏移值 —— 此时元素只是脱离了文档流，位置仍停留在原处（相当于 top: auto; left: auto）。