子元素定位受最近的已定位祖先影响，而非继承父元素position；relative、absolute等非static元素创建定位上下文，决定子元素定位基准，理解containing block是关键。
在CSS布局中，position 属性决定了元素的定位方式，但子元素的定位行为会受到其最近的已定位祖先元素的影响，而不是简单的“继承”关系。需要明确的是：position 不会被继承，但 定位上下文（containing block） 会由父元素决定，这才是影响布局的关键。
1. position 不会继承，但定位上下文依赖父元素
子元素设置 position: absolute 或 fixed 时，并不会从父元素“继承”position值，而是根据最近的已定位祖先元素来确定自己的定位基准。
- 已定位元素：指 position 值为 relative、absolute、fixed 或 sticky 的元素。
- 如果父元素没有设置这些值（即默认 position: static），则它不能作为定位上下文。
- 此时子元素会继续向上查找，直到找到第一个已定位的祖先，或最终相对于初始包含块（通常是视口）定位。
2. relative 父元素创建定位上下文
当父元素设置 position: relative，即使没有偏移（top/left等），它也会成为子元素的定位参考点。
<font face="Courier New">
.parent {
position: relative;
width: 300px;
height: 200px;
}
.child {
position: absolute;
top: 20px;
left: 30px;
}
</font>
此时 .child 的 top: 20px 是相对于 .parent 的内容区域起始位置计算的。如果没有 position: relative，.child 就可能相对于页面或其他祖先定位，造成布局错乱。
立即学习“前端免费学习笔记（深入）”；
3. absolute 父元素同样作为参考
如果父元素本身是 position: absolute，它依然可以作为子元素的定位容器。这种嵌套结构常见于复杂弹窗或悬浮菜单。
- 子元素的 top、left 等属性仍然相对于该父元素的边界框计算。
- 层级关系通过 z-index 控制，但需注意只有定位元素的 z-index 才生效。
4. fixed 和 sticky 的特殊情况
position: fixed 元素通常相对于视口定位，不受父元素影响，除非父元素创建了新的层叠上下文或使用了 transform、perspective 等属性，这会导致 fixed 元素被“束缚”在该容器内。
position: sticky 则依赖父元素的滚动容器。如果父元素没有溢出（如未设置 overflow: auto 且内容未超出），sticky 将无法触发。
基本上就这些。理解“定位上下文”比纠结“继承”更重要。只要记住：子元素是否能以某个父元素为参考进行定位，取决于该父元素是不是“已定位”，而不仅仅是结构上的父子关系。不复杂但容易忽略。
