Absolute position, can someone explain this

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 its absolute positioning of an image obviously.

1. top is like padding from the top, right?
2. what does left 50% do?
3. why is the left margin at -445px?

Update: width is 860px. The actual image is 100x100 if that makes a difference??

Answer 1

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 2

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 3

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

Answer 4

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.

2. & 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 5

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 6

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.