gruppera div-taggar

jag får inte till detta:
alla 4 div:arna hamnar över varann :(

<table>
	<tr>
		<td>
			<div class="bgblue60" style="position:absolute; background-color:#ff0000; z-index:1; margin-left:0; width:310px;"></div>
			<div class="h6" style="position:absolute; z-index:2;">Översta lagret</div>
		</td>
	</tr>
	<tr>
		<td>
			<div class="bgblue60" style="position:absolute; background-color:#c4c4c4; z-index:1;margin-left:0; width:310px;"></div>
			<div class="h6" style="position:absolute; z-index:2;">Översta lagret2</div>
		</td>
	</tr>
</table>

Hur ser din CSS ut då?

den innehåller ingenting som har med positioneringen att göra.
jag vill alltså bara ha två objekt uppe på varandra!

kan man inte få divarna att positionera sig efter td-taggen?

Varför inte:

 
<table>
	<tr>
		<td class="bgblue60" style="background-color:#ff0000; margin-left:0; width:310px;">
			<div class="h6" style="position:absolute; z-index:2;">Översta lagret</div>
		</td>
	</tr>
	<tr>
		<td class="bgblue60" style="background-color:#c4c4c4; margin-left:0; width:310px;">
			<div class="h6" style="position:absolute; z-index:2;">Översta lagret2</div>
		</td>
	</tr>
</table>

can´t do it!
det är så här:
jag ska visa horisontella staplar i tabellen och i början på varje stapel ska dess namn stå.
staplarna har en variabel längd så därför inte width i td-taggen.

upplägget kanske är fel tänkt, kan man göra detta på ett annat sätt, som funkar!

jag la till ett radbryt efter div 2, då funkar det:

<table cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<div class="bgblue60" style="position:absolute; background-color:#ff0000; z-index:1; margin-left:0; width:310px;"></div>
			<div class="h6" style="position:absolute; width:100px; z-index:2;">Översta lagret</div><br>
		</td>
	</tr>
	<tr>
		<td>
			<div class="bgblue60" style="position:absolute; background-color:#c4c4c4; z-index:1;margin-left:0; width:310px;"></div>
			<div class="h6" style="position:absolute; width:100px; z-index:2;">Översta lagret2</div><br>
		</td>
	</tr>
</table>