学习前提
完成普通布局、Flex 和 Grid，理解元素是否占据正常文档流空间。
本课完成后你能做什么
判断 relative、absolute、fixed 和 sticky 的用途，解释为什么更大的 z-index 仍可能被遮挡。
先理解机制
relative 保留原来的流内空间，偏移只是改变视觉位置。absolute 脱离正常文档流，按包含块定位；常见做法是在局部容器上设置 position:relative。fixed 通常相对视口，但某些祖先属性可改变其包含块。sticky 仍参与流内布局，在满足滚动和偏移条件后黏住。
z-index 并不是全网页统一的无限排名。某些定位、透明度或变换会建立层叠上下文，子元素的排名先受父级上下文约束。一个子层写99999，也不一定能越过父级所在的另一层。调试下拉菜单被遮挡时，还要检查祖先 overflow 是否裁切，而不只是不断增加数字。
可运行示例
<style>
.card{position:relative;padding:40px 24px 24px;border:1px solid #ccd;max-width:400px}
.badge{position:absolute;top:10px;right:10px;background:#286c4d;color:white;padding:2px 8px}
</style>
<article class="card"><span class="badge">New</span><h2>Positioning practice</h2><p>The badge belongs to this card.</p></article>推演与验证
先观察标签位于卡片右上角。去掉卡片的 relative，再看标签参照的位置变化；恢复后增加卡片正文，标签仍固定在局部角落。然后给外部容器设置 overflow:hidden 并让标签负偏移，观察裁切。这个现象与 z-index 无关，说明遮挡和裁切是不同问题。
常见错误与边界
不要用绝对定位拼整篇正文，翻译变长后会互相覆盖。sticky 需要适当的 top 等偏移和可滚动空间；祖先滚动机制会影响参照。仅靠鼠标悬停出现的浮层在触屏上难以使用，应让可聚焦按钮控制展开。
动手练习
为卡片增加右上角状态标签，再说明为什么不能把整个卡片正文也设为 absolute。
参考解法与理由
状态标签是局部覆盖内容，可以脱离流；正文必须决定卡片自然高度。把正文也移出流后，父元素可能不再由这些文字撑开，下一张卡片就会覆盖它。用布局系统安排主体，用定位解决少量覆盖关系。