about Phark image replacement

[flutterby nut]

the relevant css i'm following is:

div#branding {
height: 120px;
background: transparent url(branding.png) no-repeat 0 0;
position: relative;
z-index: 10;}

h1 {
position: absolute;
top: -60px;
left: -80px;
width: 588 px;
height: 253px;
background: transparent url(h1.png) no-repeat;
text-indent: -9999px; }

the idea being: the negative text-indent moves the h1 text off screen to be replaced with the h1.png...

the problem is: with this particular code, this image doesn't show up on screen either...i'm looking in firefox 1.5...my search of google, while enlightening, didn't solve my problem...so i experimented and discovered that changing the h1 position to relative displays the image on screen in firefox and ie6 as it should be...while i should rejoice that this is so and move on, i would really like to know why position: relative made the difference...

any thoughts?

[EC]

Well, if you're positioning something absolutely, by giving it a negative top and left coordinate you're directing it to somewhere off screen (past top, past left). Absolute positioning takes the element out of the normal flow of the document.

Relative positioning works with the normal flow of the document.

With relative positioning, it's offsetting the element in relation to the element that comes before it.

[flutterby nut]

so...

position: relative;
top: -60px;
left: -80px;

keeps it in the normal flow...image shows up...position: absolute; ...it doesn't show up...so am i safe in ignoring the original code?

[Benjamin]

div#branding {
height: 120px;
background: transparent url(branding.png) no-repeat 0 0;
}

h1 {
width: 588 px;
height: 253px;
background: transparent url(h1.png) no-repeat;
text-indent: -9999px; }