CSS 上下左右属性如何工作？

Question

我想知道 top、

left

bottom

和

right

的

CSS

属性背后的逻辑是什么。

例如，如果我要执行以下操作：

img {
    position:absolute;
    right:5px;
}

这会将图像的右边缘设置为其包含元素的右边缘左侧 5px。

我理解得很好，语法也很有意义，但是我有点困惑的是，如果我要这样设置它：

img {
    position:absolute;
    right:0px;
}

它应该将图像的右边缘设置为其包含元素的右边缘的左侧，但语法对我来说似乎很奇怪，我必须指定

right:0px;

。

我只是好奇为什么它会这样工作，并且与

float:right;

或

position:right;

的格式不同

Answer 1

float

属性与文档中的其他元素相关。

top

、

right

、

left,

和

bottom

属性是相对于 该元素 的边缘的。他们将该数量的边距添加到元素的指定一侧。

float: left;

表示“我要漂浮到我旁边的 其他元素的 left。”

right: 5px;

表示“在右侧时，最近的元素必须距 me 5 像素。”

这是一个无私与自私的问题。请参阅 W3C Wiki 了解更多信息。

此外，请记住

top

、

right

、

left

和

bottom

属性仅在设置

position

时才起作用。

Answer 2

那么，你需要了解一下定位的概念。让我们试着理解这一点。假设您具有以下结构：

HTML：

<div id = "divContainer">
    <div id = "divElement"></div>
</div>

CSS：

#divContainer {
    height:300px;
    position:relative;
    width:300px;
    background-color:Red;
}

#divElement {
    height:150px;
    position:absolute;
    width:150px;
    background-color: Orange;
    right:0px;
}

请参阅此处：http://jsfiddle.net/3mQk2/

如您所见，divElement 粘在 divContainer 的右端角。这是因为

position:absolute

将元素从正常的“文档流”中取出。这本身不会移动元素（删除

right:0;

并查看）。当您提供

right:0

值时，它会理解“使当前元素 (divElement) 与其容器之间的距离位于容器右侧的 0px”。

也会发生这种情况，因为容器上附有

position:relative

。如果相反，容器的位置属性以这种方式设置为静态（顺便说一下，这是默认值）：

#divContainer {
    height:300px;
    position:static;
    width:300px;
    background-color:Red;
}

那么 divElement 的容器将是 window 元素，而不是 divContainer（是的，这对许多人来说是一个了不起的时刻）。在这种情况下，divElement 将“卡”在其容器（即窗口）的角落。

您可以在这里看到：http://jsfiddle.net/35qc2/

希望这有帮助。

编辑：我知道它的作用，我更想知道为什么 right:0 的语法，我知道position:right;不存在，但它在语法上比 right:0px 更有意义。

这是您在上面发表的评论。让我们尝试分解并检查它。

“我知道该位置：正确；不存在”

是的，你说得对。位置：右侧不存在。

但它在语法上比 right:0px 更有意义。

不。不会的。为此，您必须了解财产的基本责任。即：

position property

：元素如何定位。

top, right, bottom, left

：元素要放置的位置。

也就是说，这些属性（上、右、下、左）取决于位置属性。

这就是为什么当

position

属性设置为静态时这些属性不起作用。它们仅在

position

不静态时才会出现。

Answer 3

上、右、左、右；引用屏幕（或容器）中的特定坐标，而 float:right 和 float:left 则尊重容器先前可能设置的填充。

为了在DEMO中保持稳定，我将其包含在此处。您将看到两个元素都在同一个包装器内。浮动受到包装宽度和填充的限制。另一个元素是按照特定的说明放置在我想要的位置。在本例中，距离顶部向下 100 像素，距离右侧（屏幕）0 像素

有一种误解，一些开发人员认为它遵循屏幕的左上角坐标（0,0）。不完全是。就绝对位置而言，每条边都是 0。所以当你说 left:10px 时。这意味着距离屏幕中心 10 像素。右侧相同：0px。意思是从右边缘到屏幕中心 10px。