定位

这一课你将能做到

1. 说出 static、relative、absolute、fixed、sticky 五种定位的差异
2. 用 relative + absolute 实现「父相子绝」布局
3. 用 z-index 控制层叠顺序，理解层叠上下文
4. 用 fixed 做吸顶导航，用 sticky 做滚动吸附

为什么要学

正常文档流是「从上到下、从左到右」，但实际页面有大量「脱离正常流」的需求：弹窗浮在所有内容上面、导航栏吸顶、返回顶部按钮钉在右下角。这些都靠 position 实现。

人话：position 决定元素是「跟着大部队排队」还是「脱离队伍自由漂浮」——absolute 像贴在某个祖先上的便利贴，fixed 像粘在屏幕上的图钉，sticky 像走到天花板就停下的气球。

先建立图像

<style>
    body { height: 200vh; padding-top: 100px; } /* 让页面可滚动 */
    .parent {
        position: relative;
        width: 300px; height: 200px;
        background: #f0f0f0;
    }
    .child {
        position: absolute;
        top: 20px; right: 20px;
        background: tomato; color: #fff;
        padding: 8px;
    }
    .fixed-btn {
        position: fixed;
        bottom: 30px; right: 30px;
        background: #0366d6; color: #fff;
        padding: 12px 20px; border-radius: 50%;
    }
</style>

<div class="parent">
    父容器（relative）
    <div class="child">absolute 子元素</div>
</div>
<button class="fixed-btn">回到顶部</button>

absolute 子元素相对父容器定位；fixed 按钮粘在屏幕右下，滚动页面不动。

跟着做

步骤 1：static（默认值）

.box { position: static; }

正常文档流，top/right/bottom/left/z-index 全部无效。这是所有元素的初始状态。

步骤 2：relative 相对定位

.box {
    position: relative;
    top: 20px;     /* 在原位置基础上向下 20px */
    left: 30px;    /* 在原位置基础上向右 30px */
}

关键点：元素仍占据原来的空间，只是视觉上偏移了。其他元素不会填补它的位置。

<p>第一段</p>
<p style="position: relative; top: 10px; background: yellow;">第二段（下移 10px）</p>
<p>第三段</p>

第二段视觉上下移，但第三段位置不变，因为第二段的「坑位」还在。

步骤 3：absolute 绝对定位

.child {
    position: absolute;
    top: 0; right: 0;
}

关键点：元素脱离正常文档流，不占据空间；定位参照是「最近的非 static 祖先」；如果所有祖先都是 static，参照 <body>。

经典「父相子绝」：

.card {
    position: relative;     /* 父元素建立定位参照 */
}
.badge {
    position: absolute;
    top: -8px; right: -8px; /* 角标超出卡片 */
    background: red;
    color: #fff;
    border-radius: 50%;
    width: 24px; height: 24px;
}

步骤 4：fixed 固定定位