[CSS] position:relative, ma come funziona?

[blur]

ciao,

non ho capito bene come usare il position:relative..

Devo posizionare delle immagini attorno ad un altra immagine.

il tutto all'interno del contenitore div#banner:

#banner {
			padding: 0px;
			background: #FFF; 
		        text-align:left;
                        border:1px solid red
    }

come posiziono le img:

#home {position:relative;top:-40px;left:20px} 
  #lingua {position:relative;top:-50px;left:105px} 
  #partner {position:relative;top:-170px;left:210px} 
  #autori {position:relative;top:-235px;left:330px} 
  #guida { position:relative;top:-305px;left:430px}  
  #contatti {float:right;padding:20px}             
  #fumetti {position:relative;top:-374px;left:530px}

non capisco una cosa: position relative, ma rispetto a cosa?
perchè per posizionare le img i valori sono tutti negativi?
e perchè il div banner diventa così alto ( come da immagine allegata), impedendo al div "sidebar a" di posizionarsi in alto appena sotto all'immagine grande?

:master: