CSS left 属性
示例
将已定位的 <div> 元素的左边缘相对于其最近的已定位祖先元素的左边缘定位到 150px
div.c {
position: absolute;
left: 150px;
width: 200px;
height: 120px;
border: 3px solid green;
}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
left 属性影响已定位元素（positioned element）的水平位置。该属性对未定位元素（non-positioned elements）没有效果。
- 如果
position: absolute;或position: fixed;-left属性将元素的左边缘设置为距离其最近已定位祖先元素的左边缘一个单位的位置。 - 如果
position: relative;-left属性将元素的左边缘相对于其正常位置向左/向右设置一个单位。 - 如果
position: sticky;- 当元素在视口内时，left属性的行为类似于其 position 为 relative，而当元素在视口外时，则类似于其 position 为 fixed。 - 如果
position: static;-left属性无效。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| left | 1.0 | 5.5 | 1.0 | 1.0 | 5.0 |
CSS 语法
left: auto|length|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 让浏览器自动计算左边缘位置。这是默认值 | 演示 ❯ |
| length | 设置左边缘位置（例如 px、cm 等）。允许负值。 了解长度单位 | 演示 ❯ |
| % | 以包含元素%的单位设置左边缘位置。允许负值 | 演示 ❯ |
| initial | 将此属性设置为其默认值。阅读关于initial | |
| inherit | 从其父元素继承此属性。阅读关于inherit |
更多示例
示例
将 left 属性与负值一起使用，并用于没有已定位祖先的元素
div.b {
position: absolute;
left: -10px;
width: 100px;
height: 120px;
border: 3px solid blue;
}
div.c {
position: absolute;
left: 150px;
width: 200px;
height: 120px;
border: 3px solid green;
}
自己动手试一试 »
相关页面
CSS 教程：CSS 定位
CSS 参考：right 属性
CSS 参考：bottom 属性
CSS 参考：top 属性
HTML DOM 参考：left 属性
