绝对位置，有人能解释一下吗

题

这是我需要解释的 CSS 片段：

#section {
    width: 860px;
    background: url(/blah.png);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -445px;
}

好吧，显然这是图像的绝对定位。

更新：宽度为 860 像素。实际图像是 100x100 如果这有什么区别吗？

解决方案

Top 是距 html 元素顶部的距离，或者如果该元素位于具有绝对位置的另一个元素内，则距该元素顶部的距离。
& 3.它取决于图像的宽度，但它可能用于使图像水平居中（如果图像的宽度为 890px）。不过，还有其他方法可以使图像水平居中。更常见的是，这用于垂直居中已知高度的块（这是垂直居中已知高度的东西的最简单方法）：
```
top: 50%
margin-top: -(height/2)px;
```

其他提示

这样做可能是为了使元素在页面上居中（使用 “死点” 技术）。

它的工作原理如下：假设元素宽度为 890px，则设置为 position:absolute 和 left:50%, ，这将其置于 左边缘 在里面中心浏览器的中心（好吧，它可能是其他一些元素的中心 position:relative).

然后负边距用于 移动左侧边缘 向左距离等于 元素宽度的一半, ，从而将其居中。

当然，这可能不会完全居中（这取决于元素实际的宽度，没有 width 在您粘贴的代码中，因此无法确定）但它确实将元素放置在与页面中心相关的位置

top 就像从右上角开始填充？

是的，页面顶部。

剩下的50%做什么？

它将内容移至屏幕中央（100% 会一直移到右侧。）

为什么左边距是-445px？

用“左移”后：50%”，这会将其向左移动 445 像素。

上面的代码片段涉及一个带有部分 id 的元素（可以是 div、span、图像或其他元素）。

该元素具有 blah.png 背景图像，该图像将在 x 和 y 方向上重复。

如果父元素也是绝对定位的，则元素的顶部边缘将定位在距其父元素顶部 0px（或任何其他单位）的位置。如果父窗口是窗口，它将位于浏览器窗口的上边缘。

该元素的左边缘将位于距其父元素左边缘左侧 50% 的位置。

然后，该元素将从该 50% 点向左“移动”445px。

通过阅读以下内容，您将找到您需要了解的所有内容 CSS 盒子模型

当position为绝对时，top是距父级的垂直距离（可能是body标签，所以0是浏览器窗口的上边缘）。左 50% 是距左边缘的距离。负边距将其向左移动 445 像素。至于为什么，你的猜测和我的一样好。

冒着听起来像明显队长的风险，我将尝试尽可能简单地解释它。

Top 是一个数字，用于确定您希望它位于其上方的任何 html 元素顶部的像素数...所以不一定是页面顶部。设计 CSS 时请注意 html 格式。

考虑到它是 50，你的左边到 50% 应该将其移动到屏幕中央。请记住，人们的屏幕尺寸不同，并且被分配到图像的左上角 (0,0)，而不是图像的中心，因此它不会像您期望的那样完美地分配到屏幕的中心。

这就是为什么使用 margin-left 到 -445 像素——将其进一步移动，固定。

祝你好运，我希望这是有道理的。我试图用不同的措辞来解释我的解释，以防其他答案仍然给你带来困难。他们也是很好的答案。

（如果您有两个不同尺寸的显示器，我建议尝试一下代码，看看每个修改如何影响不同尺寸的屏幕！）

许可以下： CC-BY-SA 和归因