绝对位置，有人能解释一下吗
这是我需要解释的 CSS 片段：
#section {
width: 860px;
background: url(/blah.png);
position: absolute;
top: 0;
left: 50%;
margin-left: -445px;
}
好吧，显然它是图像的绝对定位。
- top 就像从顶部开始填充，对吗？
- 剩下的50%做什么？
- 为什么左边距是-445px？
更新： 宽度为 860 像素。 实际图像是 100x100 如果这有什么区别吗？
Here is a snippet of CSS that I need explained:
#section {
width: 860px;
background: url(/blah.png);
position: absolute;
top: 0;
left: 50%;
margin-left: -445px;
}
Ok so it's absolute positioning of an image, obviously.
- top is like padding from the top, right?
- what does left 50% do?
- why is the left margin at -445px?
Update:
width is 860px.
The actual image is 100x100 if that makes a difference??
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
Top 是距 html 元素顶部的距离，或者，如果它位于具有绝对位置的另一个元素内，则距该元素顶部的
& 3.这取决于图像的宽度，但它可能是为了使图像水平居中（如果图像的宽度是890px）。 不过，还有其他方法可以使图像水平居中。 更常见的是，这用于垂直居中已知高度的块（这是垂直居中已知高度的东西的最简单方法）：
Top is the distance from the top of the html element or, if this is within another element with absolute position, from the top of that.
& 3. It depends on the width of the image but it might be for centering the image horizontally (if the width of the image is 890px). There are other ways to center an image horizontally though. More commonly, this is used to center a block of known height vertically (this is the easiest way to center something of known height vertically):
这样做可能是为了使元素在页面上居中（使用 "dead center “ 技术）。
它的工作原理如下：假设元素宽度为 890px，则将其设置为
position:absolute和left:50%，这将放置其左边缘浏览器的中心（好吧，它可能是具有position:relative的其他元素的中心）。然后，负边距用于将左侧边缘向左移动等于元素宽度一半的距离，从而使其居中。
当然，这可能不会完全居中（这取决于元素的实际宽度，您粘贴的代码中没有
width，因此无法确定），但它肯定会将元素放置在与页面中心的关系This has probably been done in order to center the element on the page (using the "dead center" technique).
It works like this: Assuming the element is 890px wide, it's set to
position:absoluteandleft:50%, which places its left-hand edge in the center of the browser (well, it could be the center of some other element withposition:relative).Then the negative margin is used to move the left hand edge to the left a distance equal to half the element's width, thus centering it.
of course, this may not be centering it exactly (it depends how wide the element actually is, there's no
widthin the code you pasted, so it's impossible to be sure) but it's certainly placing the element in relation to the center of the page是的，页面顶部。
它将内容移至屏幕中央（100% 会一直移到右侧。）
使用“left: 50%”移动后，将其向左移动 445 像素。
Yes, the top of the page.
It moves the content to the center of the screen (100% would be all the way to the right.)
After moving it with "left: 50%", this moves it 445 pixels back to the left.
上面的代码片段涉及一个带有部分 id 的元素（可以是 div、span、图像或其他元素）。
该元素具有 blah.png 背景图像，该图像将在 x 和 y 方向上重复。
如果父元素也是绝对定位的，则元素的顶部边缘将定位在距其父元素顶部 0px（或任何其他单位）的位置。 如果父窗口是窗口，它将位于浏览器窗口的上边缘。
该元素的左边缘将位于距其父元素左边缘左侧 50% 的位置。
然后，该元素将从该 50% 点向左“移动”445px。
The snippet above relates to an element (could be a div, span, image or otherwise) with an id of section.
The element has a background image of blah.png which will repeat in both x and y directions.
The top edge of the element will be positioned 0px (or any other units) from the top of it's parent element if the parent is also absolutely positioned. If the parent is the window, it will be at the top edge of the browser window.
The element will have it's left edge positioned 50% from the left of it's parent element's left edge.
The element will then be "moved" 445px left from that 50% point.
通过阅读 CSS 盒模型<，您将找到您需要了解的所有内容/a>
You'll find out every thing you need to know by reading up on the CSS box model
当position为绝对时，top是距父级的垂直距离（可能是body标签，所以0是浏览器窗口的上边缘）。 左 50% 是距左边缘的距离。 负边距将其向左移动 445 像素。 至于为什么，你的猜测和我的一样好。
When position is absolute, top is vertical distance from the parent (probably the body tag, so 0 is the top edge of the browser window). Left 50% is distance from the left edge. The negative margin moves it back left 445px. As to why, your guess is as good as mine.
冒着听起来像明显队长的风险，我将尝试尽可能简单地解释它。
Top 是一个数字，决定了您希望它位于其上方的任何 html 元素顶部的像素数...所以不一定是页面的顶部。 设计 CSS 时请注意 html 格式。
你的左边到 50% 应该将它移动到屏幕的中心，因为它是 50。请记住，人们有不同的屏幕尺寸，并且分配到图像的 (0,0) 左上角，而不是图像的中心，因此它不会像您期望的那样完美地分配到屏幕的中心。
这就是为什么使用 margin-left 到 -445 像素——将其进一步移动，固定。
祝你好运，我希望这是有道理的。 我试图用不同的措辞来解释我的解释，以防其他答案仍然给你带来困难。 他们也是很好的答案。
（如果您有两个不同尺寸的显示器，我建议尝试一下代码，看看每个修改如何影响不同尺寸的屏幕！）
At the risk of sounding like Captain Obvious, I'll try explaining it as simply as possible.
Top is a number that determines the number of pixels you want it to be FROM the top of whatever html element is above it... so not necessarily the top of your page. Be wary of your html formatting as you design your css.
Your left to 50% should move it to the center of your screen, given that it's 50. Keep in mind people have different screen sizes and is allocated to the (0,0) top left of your image, not the center of the image, so it will not be perfectly allocated to the center of one's screen like you may expect it to.
THIS is why the margin-left to -445 pixels is used-- to move it further over, fixed.
Good luck, I hope that this made sense. I was trying to word my explanation differently in case other answers were still giving you a hard time. They were great answers as well.
(If you have two different sized monitors, I suggest toying around the with the code to see how each modification affects different sized screens!)