Question

     h1, p { position: absolute; left: -9999px; }

     div {position: relative;}

 #wrapper { background: #bedfe4 url(../images/sun.png) no-repeat left -30px; border: 5px    solid #402309;}

 #cloud-01 { background: url(../images/clouds-01.png) no-repeat left -100px; }                                                         

#cloud-02 { background: url(../images/clouds-02.png) no-repeat left top; }

#mountains-03 { background: url(../images/mountain-03.png) no-repeat left bottom; }

 #ground { background: url(../images/ground-05.png) no-repeat left bottom; }

#full-robot { width: 271px; }

 #branding {
background: url(../images/robot-head.png) no-repeat center top;
width: 271px;
height: 253px;
z-index: 4;
}

#content {
background: url(../images/robot-torso.png) no-repeat center top;
width: 271px;
height: 164px;
z-index: 3;
margin-top: -65px;
}

  #sec-content {
background: url(../images/robot-hips.png) no-repeat center top;
width: 271px;
height: 124px;
z-index: 2;
margin-top: -90px;
}

  #footer {
background: url('../images/robot-legs.png') no-repeat center top;
width: 271px;
height: 244px;
z-index: 1;
margin-top: -90px;
}

1)Why h1 & p use absolute position versus div which using relative?

2)on h1’s leftmargin left:-9999px Why need to make negative 9999 pixel to the left?is that offscreen?

3)In general those margin numbers are negative. rule of thumb downward and leftward are negative. upward and rightward are positive?

Answer 1

The user is using absolute positioning with -9999px to move the elements off the screen. Why they chose to do this I don’t know.

Absolute positioning takes the element out of the flow of the page. If you used relative you would have scrollbars that went very wide.

Negative top positioning draws the element upwards. Negative left positioning draws the element left. The opposite is true for positive numbers.