left:0没效果是因为元素未设置position属性，只有position为relative、absolute、fixed或sticky时，left才生效；需配合定位上下文使用，否则元素仍处于静态文档流中。
left:0 为什么没效果？检查定位上下文
直接写 left:0 不生效，大概率是因为元素没触发定位上下文。CSS 的 left、top 等偏移属性只对「定位元素」起作用，也就是 position 值为 relative、absolute、fixed 或 sticky 的元素。
常见错误现象：div { left:0; } 完全没反应，元素还在文档流里原地不动。
- 必须显式设置
position，例如position: relative;（相对自身原位置偏移）或position: absolute;（相对于最近的已定位祖先） - 如果父元素没设
position（比如还是默认的static），而子元素用了position: absolute;，那left:0是相对于 viewport 对齐，不是你想要的“父元素左侧” -
position: sticky;行为特殊，它依赖滚动容器和top/left阈值，不适用于单纯“贴左”场景
想贴父容器左边？用 absolute + 父设 position
要让子元素真正以父元素左边缘为基准对齐，得配合父子两层定位控制。
使用场景：弹窗、标签角标、侧边装饰条等需要精确锚定在父块左上角的布局。
- 父元素加
position: relative;（或absolute/fixed），创建新的定位上下文 - 子元素设
position: absolute;+left: 0;，此时left: 0就指父元素的左内边距边缘（padding-box） - 注意：若父元素有
padding-left，left:0会贴到 padding 起点，不是 content 区域最左；需要贴 content 左边就用left: -父元素的padding-left值，但更推荐改用transform: translateX(-100%)配合其他方式
示例：
`.parent { position: relative; }
.child { position: absolute; left: 0; top: 0; }`
relative 和 absolute 的 left:0 行为差异
同样是 left:0，不同 position 值导致的效果完全不同，容易混淆。
-
position: relative;+left:0：无视觉变化（因为偏移量为 0），但保留文档流占位；设left:10px才向右挪 10px -
position: absolute;+left:0：脱离文档流，从定位上下文左边缘开始计算，常用于覆盖、悬浮类布局 -
position: fixed;+left:0：相对于视口左边缘，滚动时不动——这跟“父元素”完全无关，别误用 - 兼容性上三者都没问题，但
sticky在旧版 Safari 有 bug，不建议在此场景用
替代方案：flex 或 grid 更稳当
如果目标只是“子元素靠父容器左边”，不用定位也能实现，而且更健壮、语义更清。
性能影响小，也不用操心祖先是否 position、有没有 overflow:hidden 截断绝对定位元素等问题。
- 父元素设
display: flex;，子元素自动沿主轴（默认 row）起点对齐，即左对齐；无需任何left - 父元素设
display: grid;，子元素默认也在网格区域左上角，同样不用left - 如果父是 inline 元素或需兼容极老浏览器（IE9-），才退回到
position方案；现代项目优先选 flex
一句话提醒：用 left:0 前，先问自己是不是真需要脱离文档流或像素级偏移——大多数“贴左”需求，其实只是布局对齐，不是定位控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
