left 左侧偏移属性

最后更新：2026-09-13

left left 左侧偏移属性

left 属性用于定义定位元素从其包含块左侧边缘向右的偏移量。它仅对非 static 的定位元素生效，是最常用的偏移属性之一，常与 absolute、fixed 配合实现从左侧精确定位。

分类
初始值	auto
继承	否
适用于
可动画
CSS 版本	CSS2
状态	标准

📝 语法

left: auto | <length> | <percentage>;

⚙️ 取值

值	类型	描述
`auto`	关键字	无偏移
`<length> \| <percentage>`	类型	相对包含块左边缘偏移

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
left	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

注意： left 仅对非 static 的定位元素生效，对 position: static 的元素无效。

提示： 百分比值相对于包含块的宽度计算。同时设置 left 和 right 可以拉伸元素宽度以实现自适应布局。

❓ 常见问题

Q同时设置 left 和 right 会怎样？

Aabsolute/fixed 且不设 width 时，元素宽度被拉伸，从 left 延伸到 right，实现自适应水平填充（如 .overlay { position:absolute; left:0; right:0; } 占满水平空间）；设了 width 则 LTR 下 left 生效、right 被忽略。

Qleft 的百分比是相对于谁的？

Aleft 的百分比相对于包含块的宽度计算。absolute 元素的包含块是最近定位祖先的 padding box；fixed 元素是视口；relative 元素相对自身原始位置。例如 left:50% 让元素左边缘落在包含块宽度一半处，常配合 transform:translateX(-50%) 实现水平居中。

Q如何用 left:50% 实现水平居中？

A元素 position:absolute，父容器 position:relative，left:50% 让左边缘在容器一半处，再 transform:translateX(-50%) 左移自身宽度一半，即水平居中。更简洁的现代方案：父容器 display:flex; justify-content:center。

Q为什么 left 不生效？

A最常见原因是 position 仍为 static，left 只对定位元素有效；其次是同时设了 width 和 right，LTR 下 left 优先于 right——若你预期 right 生效，需删除 left 或 width。另外确认值类型有效（auto、长度、百分比）。逐步检查定位与冲突属性即可。