26. 定位基础

position 属性概述

position 属性决定元素在页面中的定位方式。

定位类型 {
    position: static | relative | fixed | absolute | sticky;
}

配合 position 使用的还有四个偏移属性：

.box {
    top: 10px;
    right: 20px;
    bottom: 10px;
    left: 20px;
}

static —— 静态定位

static 是所有元素的默认值。元素按照 HTML 顺序从上到下排列，忽略 top、left 等偏移属性。

.box {
    position: static; /* 默认值，不写也行 */
    left: 50px;       /* 无效，不会移动 */
}

一般不用显式声明 static，除非要覆盖之前设置的定位。

relative —— 相对定位

相对定位相对于元素自身原来的位置偏移，原位置空间保留。

.original {
    width: 200px;
    height: 100px;
    background: lightblue;
}

.offset {
    position: relative;
    left: 30px;     /* 从左边向右移 30px */
    top: 20px;      /* 从上边向下移 20px */
    background: coral;
}

<div class="original">原始位置</div>
<div class="offset">相对定位后</div>

效果：偏移后的元素在原位置留下空白，不影响其他元素的布局。

absolute —— 绝对定位

绝对定位脱离文档流，不保留原位置。相对于最近的非 static 祖先元素定位。

/* 父容器 */
.parent {
    position: relative;      /* 成为定位参考 */
    width: 400px;
    height: 300px;
    border: 2px solid #333;
}

/* 子元素 */
.child {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 100px;
    height: 50px;
    background: lightcoral;
}

<div class="parent">
    <div class="child">绝对定位</div>
</div>

如果祖先元素都没有设置 position（非 static），absolute 会相对于 body 定位。

常见绝对定位场景

/* 右上角角标 */
.card {
    position: relative;
    width: 200px;
}

.card .badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: red;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
}

fixed —— 固定定位

固定定位相对于浏览器视口（viewport）定位，滚动页面位置不变。

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #007bff;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}

<button class="back-to-top">↑</button>

固定导航栏实现：

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
}

/* 给 body 加 padding-top，防止内容被导航栏遮挡 */
body {
    padding-top: 60px;
}

sticky —— 粘性定位

粘性定位是 relative 和 fixed 的结合体。元素在滚动到指定位置前表现为 relative，到达后”粘”在那里变成 fixed。

.section-title {
    position: sticky;
    top: 0;               /* 滚动到距离视口顶部 0px 时粘住 */
    background: white;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

<div class="section">
    <h2 class="section-title">第一章</h2>
    <p>第一章的内容...</p>
</div>
<div class="section">
    <h2 class="section-title">第二章</h2>
    <p>第二章的内容...</p>
</div>

sticky 的滚动行为

1. 元素在容器内，随页面滚动
2. 滚到指定的 top 值时，元素”粘”在那个位置
3. 继续滚动到父容器底部时，元素跟着离开视口

/* 表头sticky */
thead th {
    position: sticky;
    top: 0;
    background: #f5f5f5;
}

四种定位方式对比

定位方式	参考点	是否脱离文档流	常用场景
relative	自身原位置	否	作为 absolute 锚点、微调位置
absolute	最近的定位祖先	是	角标、下拉菜单、弹窗
fixed	视口	是	固定导航、返回顶部按钮
sticky	视口+滚动位置	否（滚动期间粘住）	表格头、分区标题

定位与文档流

理解”脱离文档流”很重要：

• relative：元素视觉上移动了，但原位置保留，其他元素不知道它移动了
• absolute / fixed：完全脱离文档流，不占据空间，后面的元素会上移填补位置
• sticky：在容器内时不脱离，粘住时也不脱离

/* 三个 div 正常排列 */
.box {
    width: 100px;
    height: 100px;
    margin: 10px;
}

/* 中间 div 设 absolute */
.middle {
    position: absolute;
    top: 0;
    left: 150px;
}

效果：第三个 div 会跑到第二个 div 原来的位置，因为 absolute 不占空间。

小结

• position 默认值是 static，元素按正常文档流排列
• relative 相对自身原位置偏移，原位置保留
• absolute 脱离文档流，相对于最近的定位祖先
• fixed 相对于视口定位，滚动时位置不变
• sticky 是 relative 和 fixed 的结合，滚动到指定位置时粘住
• 偏移属性（top/left/right/bottom）只在 position 不为 static 时生效