Absolute position, can someone explain this - css

Question

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??

Answer 1

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):
top: 50%
margin-top: -(height/2)px;

Answer 2

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:absolute and left:50%, which places its left-hand edge in the center of the browser (well, it could be the center of some other element with position: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 width in 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

Answer 3

top is like padding from the top right?
Yes, the top of the page.
what does left 50% do?
It moves the content to the center of the screen (100% would be all the way to the right.)
why is the left margin at -445px?
After moving it with "left: 50%", this moves it 445 pixels back to the left.

Answer 4

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.

Answer 5

You'll find out every thing you need to know by reading up on the CSS box model

Answer 6

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.

Answer 7

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!)