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.

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 100×100 if that makes a difference??

Answer 1

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;