以下是我需要解释的CSS片段：
#section {
width: 860px;
background: url(/blah.png);
position: absolute;
top: 0;
left: 50%;
margin-left: -445px;
}
好吧，这显然是图像的绝对定位。
更新的 宽度是860px。 实际图像是100x100，如果这有所不同??
答案 0 :(得分：3)
顶部是距离html元素顶部的距离，或者，如果它位于具有绝对位置的另一个元素中，则从顶部开始。
＆安培; 3.它取决于图像的宽度，但可能是水平居中图像（如果图像的宽度是890px）。还有其他方法可以水平居中图像。更常见的是，这用于垂直居中已知高度的块（这是垂直居中已知高度的最简单方法）：
top: 50%
margin-top: -(height/2)px;
答案 1 :(得分：3)
这可能是为了将元素集中在页面上（使用"dead center"技术）。
它的工作方式如下：假设元素宽度为890px，则设置为position:absolute和left:50%，将左侧边置于中心浏览器（好吧，它可能是position:relative的其他元素的中心。）
然后使用负边距将左边缘向左移动一个等于元素宽度的一半的距离，从而使其居中。
当然，这可能不是它的确切中心（它取决于元素的实际宽度，你粘贴的代码中没有width，因此无法确定）但是它确实放置了元素与页面中心的关系
答案 2 :(得分：2)
top就像从右上角填充？
是的，页面顶部。
50％的人做了什么？
它将内容移动到屏幕的中心（100％将一直向右移动。）
为什么左边距为-445px？
用“left：50％”移动它后，将它向后移动445像素。
答案 3 :(得分：2)
上面的代码段涉及一个id为section的元素（可以是div，span，image或其他）。
该元素的背景图片为blah.png，将在x和y方向重复。
如果父元素也是绝对定位的，元素的上边缘将从其父元素的顶部定位为0px（或任何其他单位）。如果父级是窗口，则它将位于浏览器窗口的顶部边缘。
该元素的左边缘位于其父元素左边缘左侧的50％处。
然后该元素将从该50％点“移动”445px。
答案 4 :(得分：1)
通过阅读CSS box model
，您会发现需要了解的所有事项答案 5 :(得分：0)
当position是绝对值时，top是与父级的垂直距离（可能是body标签，因此0是浏览器窗口的上边缘）。左边50％是距离左边缘的距离。负边距将其向左移动445px。至于为什么，你的猜测和我的一样好。
答案 6 :(得分：0)
冒着听起来像Captain Obvious的风险，我会尽可能简单地解释它。
Top是一个数字，用于确定您想要它的像素数从上面的任何html元素的顶部...所以不一定是页面的顶部。在设计CSS时要小心你的html格式。
你的左边50％应该将它移动到你的屏幕中心，因为它是50。请记住，人们有不同的屏幕尺寸，并分配到图像的左上角（0,0），而不是中心图像，所以它不会像你期望的那样完美地分配到一个人的屏幕中心。
这就是使用剩余边距-445像素的原因 - 将其进一步移动，固定。
祝你好运，我希望这是有道理的。我试图用不同的方式来解释我的解释，以防其他答案仍然给你带来困难。他们也是很好的答案。（如果您有两个不同大小的显示器，我建议使用代码来查看每个修改如何影响不同大小的屏幕！）