CSS right 属性值说明
| 值 | 描述 |
|---|---|
| auto | 设置右边缘位置。这是此属性的默认值。 |
| length | 使用px，cm等设置右边缘位置。允许使用负值。 |
| % | 设置右边缘位置，占包含元素的％。允许负值。 |
| initial | 它使属性使用其默认值。 |
| inherit | 它从其父母元素继承了属性。 |
right 属性指定定位元素的部分位置。
right 属性用于为绝对或者固定定位元素设置元素的右边距边缘和其包含块的右边缘。
如果位置选择为“静态”，则正确的属性将没有任何影响。
right 的效果取决于元素的定位方式（参见 position 属性）。
- 如果 position 设置为“absolute”或者“fixed”，则 right 属性指定元素的边缘与其包含块的右边缘之间的距离。
- 如果 position 设置为“relative”，则 right 属性指定元素的右边缘从其正常位置向右移动的距离。
- 如果 position 设置为“sticky”，则当元素在视口内时，right 属性将其位置更改为相对位置，当元素在视口外时更改为固定位置。
- 如果 position 设置为“static”，则不会有任何效果。
| 初始值 | auto |
|---|---|
| 应用于 | 定位元素。 |
| 继承 | 无效 |
| 可动画的 | 是的。元素的位置是可动的。 |
| 版本 | CSS2. |
| DOM 语法 | object.Style.Right =“50px”; |
语法
right: auto | length | initial | inherit;
right属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img {
position: absolute;
right: 35px;
}
</style>
</head>
<body>
<h2>Right 属性示例</h2>
<img src="/build/images/onitroad-logo-black.png" alt="onitroad logo" width="146" height="41">
</body>
</html>
“%”中指定的right属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
height: 150px;
width: 100%;
background-color: #ccc;
color: #ffffff;
}
img {
position: absolute;
right: 30%;
top: 120px;
}
</style>
</head>
<body>
<h2>Right 属性示例</h2>
<img src="/build/images/onitroad-logo-black.png" alt="onitroad logo" width="146" height="41">
<div>This is some div element.</div>
</body>
</html>
具有“初始”值的right属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
position: relative;
max-width: 300px;
line-height: 20px;
}
p {
position: absolute;
right: initial;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>Right 属性示例</h2>
<div>
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
<p>把痛苦停在昨天 把微笑留给明天。</p>
</div>
</body>
</html>
日期：2020-06-02 22:14:45 来源：oir作者：oir