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

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

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

• 顶部就像从顶部填充，对不对？
• 剩下的50％会做什么？
• 为什么左边距为-445px？

更新：
宽度为860像素。
实际图像是否为100x100(如果有所不同？)？

解决方案

当位置为绝对时，top为距父对象的垂直距离(可能是body标签，因此0是浏览器窗口的顶部边缘)。左50％是距左边缘的距离。负边距将其向左移动445像素。至于为什么，你的猜测和我的一样好。

top is like padding from the top right?

是的，页面顶部。

what does left 50% do?

它将内容移动到屏幕的中央(100％将一直向右移动。)

why is the left margin at -445px?

用" left：50％"将其移动后，会将其向左移动445像素。

通过阅读CSS盒子模型，我们会发现所有需要了解的知识

• 顶部是距html元素顶部的距离；如果位于绝对位置的另一个元素之内，则距顶部的距离。
• ＆3.它取决于图像的宽度，但可能用于使图像水平居中(如果图像的宽度为890px)。但是，还有其他方法可以使图像水平居中。更常见的是，这用于垂直放置已知高度的块(这是垂直放置已知高度的块的最简单方法)：

top: 50%
margin-top: -(height/2)px;

可能是为了使元素在页面上居中而完成的(使用"死中心"技术)。

它的工作方式是这样的：假设元素的宽度为890px，将其设置为" position：absolute"和" left：50％"，将其左侧边缘置于浏览器的中心(嗯，它可能是其他带有position：relative的元素)。

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

当然，这可能无法准确地居中(这取决于元素的实际宽度，我们粘贴的代码中没有width，因此无法确定)，但是可以肯定地将元素相对于这一页

上面的代码段涉及一个ID为section的元素(可以是div，span，image或者其他)。

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

如果父元素也绝对定位，则该元素的顶部边缘将从其父元素的顶部开始定位0px(或者任何其他单位)。如果父窗口是窗口，它将在浏览器窗口的顶部。

元素的左边缘距离其父元素的左边缘左侧50％。

然后，该元素将从该50％点左移445px。