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;说＆＃34;我要漂浮到我旁边其他元素的左。

right: 5px;说＆＃34;当在右侧时，最接近的元素必须与 me 相距5px。

这是无私与自私的问题。有关详细信息，请参阅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之间的距离＆＃39;。

这也是因为容器附有position:relative。相反，如果相反，容器的position属性以这种方式设置为static（这是默认方式）：

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

然后divElement的容器将是window元素而不是divContainer（是的，这对于很多人来说是一个aha！时刻）。在这种情况下，divElement会卡住＆＃39;到容器的角落（即窗户）。

您可以在此处看到：http://jsfiddle.net/35qc2/

希望这有帮助。

编辑：我知道它做了什么，我更想知道为什么右边的语法：0，我知道这个位置：对;不存在，但它在语法上比正确更有意义：0px。

这是您上面的评论。让我们试着打破它并检查它。

＆＃34;我知道这个立场：对;不存在＆＃34;

是的，你是对的。位置：右边不存在。

但语法上会比正确更有意义：0px。

不。它不会。为此，您必须了解这些属性的基本责任。即：

position property：如何定位元素。

top, right, bottom, left：要定位元素的位置。

这就是这些属性（顶部，右侧，底部，左侧）取决于位置属性。

当position属性设置为static时，这些属性无效的原因。它们仅在position不是静态时才会出现。

Answer 3

顶部，右侧，左侧和右侧;引用屏幕（或容器）中的特定坐标，而float：right和float：left表示容器之前可能设置的填充。

对于DEMO中的不稳定，我在这里包含。您将看到两个元素都在同一个包装器中。浮子被限制在包装纸宽度和衬垫上。另一个元素遵循特定说明，位于我想要的位置。在这种情况下，从顶部向下100px，从右侧（屏幕）向下0px

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

CSS顶部左下角和右下角属性如何工作？

3 个答案: