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