html - css - ebenen

[ff]

Ich habe 3 Ebenen in einer Zelle, die sich teilweise ueberlappen sollen:

PHP-Code:

<style>
 #Ebene0 {position:relative; top:0px; left:6px; z-index:1;}
 #Ebene1 {position:relative; top:6px; left:6px; z-index:3;}
 #Ebene2 {position:relative; top:-20px; left:52px; z-index:2;}
</style>

<table cellpadding='0' cellspacing='0' border='0' style='table-layout:fixed; width:150px; height:150px;'>
 <tr>
  <td>
   <div id='Ebene1'>Inhalt_1</div>
   <div id='Ebene2'>Inhalt_2</div>
   <div id='Ebene3'>Inhalt_3</div>
  </td>
 </tr>
</table> 


Das funktioniert auch wunderbar, nur, warum wird trotz "table-layout:fixed;" die Zelle so weit auseinandergedrueckt, als ob die Inhalte untereinander stuenden? Wo ist da der Wirm drinn und wie laesst sich das vermeiden?

Danke und lg
ff

[reemrev]

Ein Wurm nennt sich #Ebene0, ein anderer id=Ebene3.

[ff]

Ja klar, danke, aber dieser Wurm hat sich nur bei dem Demo-Beispiel fuer hier eingeschlichen. Beim echten Beispiel passt das.

[ff]

Ich koennte die Frage auch so stellen:

Wie erstelle ich einen Container, der die linke obere Zellenecke mit den Koordinaten 0/0 festlegt? Dann wuerde das mit "position:absolute;" funktionieren.

[ff]

Tja, fuer alle Suchenden, SO gehts:

PHP-Code:

<style>
 #Ebene1 {position:absolute; top:3px; left:6px; z-index:4;}
 #Ebene2 {position:absolute; top:20px; left:6px; z-index:3;}
 #Ebene3 {position:absolute; top:3px; left:112px; z-index:2;}
</style>

<td style='width:100%; height:100%;'> 
 <div style='position:relative; height:50px;'>
  <div id='Ebene1'>Inhalt_1</div> 
  <div id='Ebene2'>Inhalt_2</div> 
  <div id='Ebene3'>Inhalt_3</div> 
 </div>
</td> 


lg
ff