Question

我有一个非常基本的页面，包含两个元素，一个外部绿色框和一个内部蓝色框。我很困惑为什么在内盒上设置正确的属性会将它移到左边？此外，我很困惑为什么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>

Answer 1

设置right属性表示元素的右边缘应该有多远。把它想象成一个新的起源点。默认情况下，您的原始位置是包含元素的左上角。您可以使用bottom和right来更改此内容。

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

有关详情，请参阅http://www.w3.org/wiki/CSS/Properties/right

Answer 2

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

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

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

Answer 3

投入

float:right;

到你的内心div，所有人都会按照你的期望工作。

Answer 4

设置权限是你想要从右边推送它的程度

为什么设置`right` CSS属性会向左推送一个元素？

4 个答案: