为什么设置 `right` CSS 属性会将元素推向左侧？答案

【问题标题】：Why does setting the `right` CSS attribute push an element to the left?为什么设置 `right` CSS 属性会将元素推向左侧？
【发布时间】：2023-03-08 06:13:01
【问题描述】：

我有一个非常基本的页面，其中包含两个元素，一个外部绿色框和一个内部蓝色框。我很困惑为什么在内框上设置 right 属性会将其移到左侧？此外，我很困惑为什么right:0 不会将框的右边缘与父框的右边缘对齐？这是我的简短示例页面...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
            #outer {
                background-color : green;
                width : 500px;
                height : 500px;
            }

            #inner {
                position : relative;
                background-color : blue;
                height : 400px;
                width : 400px;
                top : 10px;
                right : 20px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">


            </div>

        </div>
    </body>
</html>

【问题讨论】：

标签： css positioning

【解决方案1】：

设置right 属性表示您的元素应该离右边缘多远。将其视为设置新的起点。默认情况下，您的来源是包含元素的左上角。您可以使用bottom 和right 来更改此设置。

当您的元素相对定位时，其右原点将是其右边缘的自然位置。这就是你的元素向左移动 20px 的原因。如果您将位置值更改为absolute，新的原点将是最近定位容器的右边缘，或视口本身。在您的情况下，它是视口。

欲了解更多信息，请参阅http://www.w3.org/wiki/CSS/Properties/right

【讨论】：

具体你可以选择left/width/right中的任意两个，浏览器将计算另一个（以及top/height/bottom中的任意两个)。
这并不能以任何方式回答他的问题。运行他的代码，你会看到尽管包含了右标签，但内部 div 仍向左浮动。
@Taz 他的元素没有向左浮动，它从其自然右侧位置推了 20px，正如我的回答所述（以及链接的文档建议）。为了清楚起见，我已采纳您的评论并改进了我之前的回答。

【解决方案2】：

扔一个

float:right;

到您的内部 div，一切都会按您的预期工作。

【讨论】：

【解决方案3】：

此外，我很困惑为什么 right:0 不会将框右边缘与父框的右边缘对齐？

如果要为所有后代建立新的坐标系，则需要将父框设置为position:relative（或absolute，或fixed）。否则内盒仍然是相对于 body 定位的。

例如，比较这两个演示：
position:relative outer
position:static outer

【讨论】：

我刚刚尝试过，我将position:relative; 插入到上面的#outer 块中，没有进行其他修改，并且它似乎没有修改右侧的行为仍然使框向左移动。唯一适用于代码的是上面 Taz 建议的孩子中的float:right。绝对或固定都不会改变任何东西。
好的，我明白了，将外部 div/box 设置为relative，将内部设置为absolute 或fixed。

【解决方案4】：

设置正确就是你想从右边推多少

【讨论】：