Ciao a tutti!

Ho un problemino con la sovrapposizione di oggetti o immagini nell'header del mio sito.

In pratica ho inserito nel css in colore di sfondo con background repeat-x con un'immagine e devo sovrappore a questa immagine da 1px per 120px la data e l'orario impostati con il tag div.

di seguito i codici per far capire meglio:

css:
codice:
#xo-datetime {
	clear:			                both;
	/* Use relative pos to ensure the banner ad img/flash is relative to the header */
	position:		                relative;
	top:							       2px;
	z-index:		                100;
	width:			                100%;
	height:			                0px;
	/*background:		                #f1f1f1 url(../img/header-bg.png) repeat-x left bottom;*/
	color: 			                #777777;
}

#xo-datetime-time
{
	border-style:         solid;
	border-width:       1px;
	border-color:      #00509E;
	position:						absolute;
	top:							0px;
	right:							155px;
	width:							140px;
	height:							20px;
	color:                  #777777;
	background:   transparent;
	text-align: center;
}

#xo-datetime-date
{ 	
	position:						absolute;
	top:							40px;
	right:							0px;
	width:							300px;
	height:							20px;
	padding:						0px;
}
questo il file .html

codice:
<div id="xo-datetime"> 
<div id="xo-datetime-time"><form name="time" action="">
<input type="text" size="15" name="timeform" />
<script type="text/javascript" language="javascript" src="<{$xoops_url}>/include/time.js">
<!-- 
time(); 
//-->
</script>
</form></div>
<div id="xo-datetime-date"><script language="JavaScript" type="text/javascript" src="<{$xoops_url}>/include/dateofday.js"></script></div>
</div>
mi spiegate come mai la data e l'orario vengono nascosti dall'immagine in background?

Grazie in anticipo a chi risponde!