静态定位 static
static是 CSS 中position属性的默认值，也就是元素在文档流中的自然位置。当一个元素设置了position: static后，它会严格按照 HTML 的书写顺序，从上到下、从左到右依次排列，不会受到top、right、bottom、left以及z-index属性的任何影响。可以说，静态定位是最 ”温顺“ 的定位方式，它让元素始终保持在正常的布局流中，既不会产生偏移，也不会成为任何后代元素绝对定位的参考容器。
在实际开发中，显式写出position: static的场景并不多，因为它是默认的。但有时我们需要重置一个被其他样式覆盖的定位属性，就可以用static来恢复元素到正常的文档流。此外，静态定位的元素不会创建新的层叠上下文，在z-index竞争中处于劣势，通常位于页面中较低层级。
<div class="static-box">我是静态定位，处于默认文档流中</div>
.static-box {
position: static; /* 默认值，可以省略 */
top: 50px; /* 完全无效，不会发生偏移 */
left: 100px; /* 完全无效 */
z-index: 999; /* 同样无效 */
}相对定位 relative
relative相对定位是一个非常巧妙的值。元素首先会像static一样，占据它在文档流中的原始位置，保留原有的空间。然后，我们可以通过top、right、bottom、left属性，让元素相对自己的原始位置进行视觉偏移。这种偏移纯粹是视觉上的，并不会影响周围其他元素：它们仍然将相对定位的元素视为还在原来的位置，不会去填补偏移后留下的空白。换句话说，相对定位的元素就像是在原地 "灵魂出窍"，视觉上移动了，但身躯还留在原位。
正因为它既不脱离文档流又能偏移，同时还会为后代元素建立新的定位参考系，relative最经典的用法就是作为absolute定位元素的 "锚点容器"。只要给父元素设置position: relative（甚至不需要设置偏移量），其内部的绝对定位子元素就会以该父元素的边界为参照进行定位。此外，相对定位元素还可以配合z-index来提升层叠顺序，实现一些遮盖效果。
<div class="relative-parent"> 我是相对定位的容器 <div class="relative-child">我相对自身偏移了</div> </div>
.relative-parent {
position: relative; /* 创建定位上下文，给子元素当参考 */
width: 300px;
height: 200px;
background: #eee;
}
.relative-child {
position: relative;
top: 20px;
left: 30px;
/* 视觉上向下移动20px，向右移动30px，但原始空间不变 */
}绝对定位 absolute
absolute绝对定位是布局中最具 "破坏性" 却又极其灵活的值。一旦给元素设置position: absolute，它会完全脱离正常的文档流，不再占据任何空间，就像浮在了页面上方。周围的元素会忽视它的存在，按照文档流重新排列，就像该元素被从 DOM 中 "抽走" 了一样。脱离文档流后，绝对定位元素的宽度默认会收缩到其内容的宽度，而不再像块级元素那样自动撑满父容器。
绝对定位元素的偏移依据是一个关键概念：它会相对于最近的已定位祖先元素进行定位。“已定位” 指的是position不为static的祖先元素。如果向上没有找到任何已定位的祖先，那么它会相对于初始包含块（通常就是<html>元素或者视口）进行定位。因此，我们经常会把父元素设置为relative，目的就是为该绝对定位的子元素提供一个可控的定位参考。典型应用场景包括弹出菜单、提示框、图标上的角标等。
<div class="product-card"> <img src="product.jpg" alt="商品" /> <span class="badge">热卖</span> </div>
.product-card {
position: relative; /* 作为角标的定位锚点 */
display: inline-block;
}
.badge {
position: absolute;
top: -5px;
right: -5px;
/* 角标以 product-card 的右上角为基准偏移 */
background: red;
color: white;
padding: 2px 5px;
border-radius: 3px;
}固定定位 fixed
fixed固定定位同样会让元素脱离普通文档流，但它与absolute的最大区别在于参照物：固定定位的元素永远以浏览器视口（viewport）作为定位基准。也就是说，无论页面如何滚动，被设置为fixed的元素都会停留在屏幕的固定位置，不会随着内容滚动而移动。因此它非常适合制作 “回到顶部” 按钮、固定的导航栏或页脚工具栏等需要始终可见的界面元素。
需要特别注意的是，固定定位在一些特殊情况下会改变参考对象。根据 CSS 规范，如果某个祖先元素设置了transform、perspective或filter等属性，那么固定定位的元素就不再以视口为参照，而是以该祖先元素为参照，效果类似于绝对定位。这可能会导致 “固定” 失效的迷惑现象，排查时需留意这些属性。此外，固定定位的元素也可以配合z-index控制层叠顺序，避免被其他内容遮挡。
<button class="back-to-top">回到顶部</button>
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: #333;
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 1000;
}粘性定位 sticky
sticky是 CSS3 引入的一种混合定位方式，它巧妙地融合了relative和fixed的特性。在默认状态下，元素表现为相对定位，会跟随文档流正常排版。当页面滚动到某个阈值（由top、right、bottom或left指定）时，元素会 “粘” 在视口的指定位置，变为类似固定定位的行为，直至它的父容器边界离开视口。
sticky生效必须具备几个条件：第一，必须明确指定至少一个方向上的阈值，例如top: 0，否则其行为等同于relative；第二，父容器的overflow不能设置为hidden、scroll或auto等非visible的值，否则滚动上下文被剪切，粘性效果会失效；第三，元素的高度必须小于父容器的高度，否则没有滚动的空间，也就无法触发粘附。它最常见的例子就是长列表的表头吸附、侧边栏的导航跟随等。
<nav class="sticky-nav"> 我是导航栏，滚动到顶部时会吸住 </nav> <section style="height: 2000px;"> 内容区域…… </section>
.sticky-nav {
position: sticky;
top: 0;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 10px;
z-index: 10;
}五种定位值对比
为了更好地理解和记忆这五个定位值的特点，我们可以通过一张表格将它们的关键差异直观地展示出来：
| 定位值 | 是否脱离文档流 | 偏移参考对象 | 对 top/left 等属性的响应 | 典型应用 |
|---|---|---|---|---|
static | 否 | 无 | 忽略 | 默认布局，重置定位 |
relative | 否（保留原位空间） | 自身原始位置 | 有效，视觉偏移 | 微调元素位置，作为绝对定位的参考容器 |
absolute | 是 | 最近的已定位祖先元素 | 有效，重新定位 | 弹出层、图标角标、自定义下拉菜单 |
fixed | 是 | 浏览器视口（或创建了特殊上下文的祖先） | 有效，相对于视口固定 | 固定导航栏、悬浮按钮、模态框的遮罩 |
sticky | 否（阈值前）/ 是（阈值后类似 fixed） | 滚动容器（父级）和视口 | 有效，需指定阈值 | 吸顶导航、表头固定、侧边栏跟随 |
在实际工作中，经常会将这些定位值组合使用，比如用relative包裹absolute实现局部控制，或者用sticky提升列表交互体验。深入理解它们的计算规则和层叠上下文，才能真正驾驭 CSS 布局。如需查看具体的交互效果，可以访问在线演示 Demo：www.ipipp.com。
CSS position相对定位绝对定位固定定位粘性定位修改时间：2026-08-03 09:18:42