将定位 <div> 元素的左边缘设置为距其最近的定位祖先左边缘 150px:
div.c {
position: absolute;
left: 150px;
width: 200px;
height: 120px;
border: 3px solid green;
}
亲自试一试 »
下面有更多 "亲自试一试" 示例。
这个left
属性影响定位元素的水平位置。此属性对非定位元素没有影响。
left
属性将元素的左边缘设置为其最近定位祖先的左边缘左侧的单位。left
属性将元素的左边缘设置为其正常位置左/右的单位。left
当元素位于视口内时,属性的行为就像其位置是相对的,而当元素位于视口外时,其位置就像是固定的。left
属性没有影响。表中的数字指定完全支持该属性的第一个浏览器版本。
Property | |||||
---|---|---|---|---|---|
left | 1.0 | 5.5 | 1.0 | 1.0 | 5.0 |
left: auto|
length|initial|inherit;
Value | Description | Demo |
---|---|---|
auto | Lets the browser calculate the left edge position. This is default | Demo ❯ |
length | Sets the left edge position in px, cm, etc. Negative values are allowed. Read about length units | Demo ❯ |
% | Sets the left edge position in % of containing element. Negative values are allowed | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about 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 参考:权利属性
CSS 参考:底部属性
CSS 参考:顶级属性
HTML DOM 参考:留下属性
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!