container-query中position:absolute无效，因@container不创建定位上下文，父容器须显式设position:relative等非static值；否则absolute子元素将回退至body定位。
container-query 里用 position: absolute 为什么没效果？
因为 @container 本身不改变定位上下文，它只触发样式重计算；子元素要能被 top/left 等控制，父容器必须显式设 position: relative（或其它非 static 值），否则 absolute 子元素会向上找最近的已定位祖先——大概率落到 body 上，完全脱离容器范围。
如何让子元素在不同 container 尺寸下切换定位锚点？
不能靠 @container 直接改 position 属性值（position 不是可动画/可查询的属性），但可以结合 top/bottom 的条件切换实现锚点迁移：
- 小容器时用
bottom: 0锚定底部，top: auto - 中等容器时用
top: 50%+transform: translateY(-50%)居中 - 大容器时用
top: 20px固定距顶距离，同时bottom: auto
关键是要在每次查询中显式重置冲突属性，比如 bottom: auto 必须写，否则浏览器可能保留旧值导致定位错乱。
transform 替代 top/left 在 container query 中更可靠吗？
是的，但仅限于位移类调整。原因有三：
立即学习“前端免费学习笔记（深入）”；
-
transform不触发布局重排，性能更好，尤其在频繁 resize 或滚动时 - 它不依赖父容器是否设置了
position: relative（transform本身不创建新定位上下文） - 在
@container查询中，transform: translateY()的值可直接响应容器尺寸变化，而top: calc(100% - 20px)这类表达式在 container query 中不被支持
不过注意：transform 无法替代 top/bottom 实现“贴父边”语义（比如“始终紧贴容器底部”），它只能做相对偏移。
容易被忽略的兼容性与调试点
Chrome 119+、Firefox 120+、Safari 17.4+ 支持 @container，但 Safari 对 container-type: size 的触发阈值较敏感，有时需加 container-name 显式命名才能稳定匹配；另外，若父容器未设置 container-type，所有子级的 @container 规则都会静默失效——这个错误不会报任何警告，只能靠 DevTools 的 “Layout” 面板确认容器是否被识别为 container。
