最直接方式是用 position: absolute 配合 top: 0; left: 0，但需父容器设为 relative/absolute/fixed；Flexbox 中用 justify-content: flex-start 和 align-items: flex-start；transform: translate(-50%, -50%) 会导致居中而非左上对齐。
用 position: absolute 配合 top: 0; left: 0
这是最直接、最可控的方式，适用于需要脱离文档流、精确锚定在父容器左上角的场景。前提是父容器必须是 position 为 relative、absolute 或 fixed 的定位上下文，否则会向上逐级找，最终相对于视口定位。
- 父容器没设
position？子元素的top: 0; left: 0会跑到整个页面左上角，不是你想要的“容器左上” - 想固定在浏览器窗口左上？把父容器换成
position: fixed，再加top: 0; left: 0 - 注意
z-index：如果被其他元素遮挡，得显式设置正数z-index
<div style="position: relative; width: 300px; height: 200px; border: 1px solid #ccc;"> <div style="position: absolute; top: 0; left: 0; background: red; width: 50px; height: 50px;"></div> </div>
margin 和 float 不适合“左上角精确定位”
很多人试过 margin: 0 或 float: left，但这些方法无法真正实现“贴左上角”的定位语义：
-
margin: 0只是清空默认外边距，不能把元素拉到容器边界——它仍受文档流和盒模型约束 -
float: left是为文字环绕设计的，行为不可靠；且浮动元素会塌陷父容器高度，还可能触发 BFC 意外表现 - 现代布局中，
float已不推荐用于定位，CSS Grid / Flexbox /position才是正解
Flexbox 容器里让子元素贴左上？别用 align-self，用 justify-content 和 align-items
如果父容器是 display: flex，想让第一个子元素紧贴左上，关键不是操作子元素本身，而是控制容器的主轴和交叉轴对齐方式：
- 默认
flex-direction: row下，justify-content: flex-start（左对齐） +align-items: flex-start（顶对齐）即可 - 如果子元素设置了
align-self: flex-end，它会覆盖容器的align-items，导致偏离左上 - 注意：Flex 定位依赖父容器尺寸，若父容器高度为
auto且无内容撑开，align-items: flex-start看不出效果
<div style="display: flex; justify-content: flex-start; align-items: flex-start; height: 200px; border: 1px solid #999;"> <div style="background: blue; width: 40px; height: 40px;"></div> </div>
为什么 transform: translate(-50%, -50%) 不是左上角解法
这个写法常被误用：它实际是把元素自身中心点移到参考点（比如 top: 0; left: 0），结果是元素**居中于左上角**，而不是左上角对齐。视觉上反而偏右下，尤其当元素有宽高时更明显。
立即学习“前端免费学习笔记（深入）”；
- 错误示范：
position: absolute; top: 0; left: 0; transform: translate(-50%, -50%)→ 元素中心落在 (0, 0)，左上角在 (-w/2, -h/2) - 真要居中于某点才用它；左上对齐必须去掉
transform，或改用transform: translate(0, 0)（无意义） - 移动端缩放或高 DPI 屏幕下，
translate还可能引发亚像素渲染模糊，能不用就不用
top: 0; left: 0 却不动”的问题，根源都在这里。 
