CSS left

CSS right

此CSS属性为水平定位的元素指定右偏移量，并且不影响未定位的元素。它是
左，上，和
下的四个偏移属性之一。

当
left和定义了
right 属性，如果容器是从右到左，则right值具有优先级；如果容器是从左到右，则left值具有优先级。

此属性的效果取决于相应元素的放置方式，即
position 属性的值。设置 position属性时，
right 属性不受影响
static 值。

此属性对值
static 以外的定位元素的影响如下：

当元素处于绝对位置或固定位置（即 position：absolute; 和 position：fixed; ）时， right 属性指定元素的右边缘与其包含块（元素相对放置的祖先）的右边缘之间的距离。
如果元素是相对放置的（即 position：relative; ），则 right 属性会将元素的右边缘从其正常位置设置为左/右。
如果 position 设置为 sticky，，例如 position：sticky; ，则定位上下文是视口。当元素在视口中时， right 属性的行为就像其位置是相对的。当元素位于外部时， right 属性的行为就像其位置是固定的。

语法

 left: auto | length | percentage | initial | inherit;

属性值

此属性的值定义如下：

auto：这是默认值。它允许浏览器计算
right 边缘位置。

length：此值定义
right 属性的位置允许使用负值。

percentage：此值以百分比（％）定义
right 属性的位置。）。它被计算为元素包含块的宽度。

initial：它将属性设置为其默认值。

inherit：它从其父元素继承属性。

示例

在此示例中，有四个绝对位置（即
position：absolute; ） div元素。我们正在向他们应用
right 属性。具有默认值和相似尺寸的
right：initial; 和
right：auto; 的div元素将重叠。

 <!DOCTYPE html>
 <html>
 <head>
 <title>
 CSS right Property
 </title>
 <style>
 div{
 position: absolute;
 width: 200px;
 height: 100px;
 font-size: 40px;
 }
 #len {
 right: 200px;
 border: 5px solid lightgreen;
 }
 #per {
 right: 50%;
 border: 5px solid blue;
 }
 #auto {
 right: auto;
 border: 10px solid red;
 }
 #init {
 right: initial;
 border: 5px solid yellow;
 }
 </style>
 </head>
 <body>
 <h1> Example of the right Property </h1>
 <div id = "len"> right: 200px; </div>
 <div id = "per"> right: 50%; </div>
 <div id = "auto"> right: auto; </div>
 <div id = "init"> right: initial; </div>
 </body>
 </html>

输出

CSS right_https://bianchenghao6.com_【CSS 教程】_第1张

示例

在此示例中，有四个相对定位（即
position：relative; ）的div元素。我们正在对它们应用 CSS
right 属性。在这里，我们在两个div元素上使用长度和百分比的负值。

 <!DOCTYPE html>
 <html>
 <head>
 <title>
 CSS right Property
 </title>
 <style>
 div{
 position: relative;
 width: 250px;
 height: 100px;
 font-size: 40px;
 }
 #len {
 right: -100px;
 border: 5px solid lightgreen;
 }
 #per {
 right: -30%;
 border: 5px solid blue;
 }
 #auto {
 right: auto;
 border: 5px solid red;
 }
 #init {
 right: initial;
 border: 5px solid lightblue;
 }
 </style>
 </head>
 <body>
 <h1> Example of the right Property </h1>
 <div id = "len"> right: -100px; </div>
 <div id = "per"> right: -30%; </div>
 <div id = "auto"> right: auto; </div>
 <div id = "init"> right: initial; </div>
 </body>
 </html>

输出

CSS right_https://bianchenghao6.com_【CSS 教程】_第2张

<< Python 语法 Python 变量 >>

CSS order

CSS left