✔ problem mit darstellung von mehreren div elementen

[Maik]

Na, dann zeig mal bitte deinen Versuch im vollständigen Quellcode.

mfg Maik

 

[andrutz]

...

<table id="tl_35" style="border: 1px solid black; margin: 10px; padding: 5px; z-index: 1; float: left; width: 170px; height: 320px; position: relative;">
 <tbody>
  <tr>
   <td style="border: 1px dotted rgb(136, 136, 136); padding: 0px; cursor: move; height: 20px; text-align: center; font-size: 10px;">
    zum Verschieben hier ziehen
   </td>
  </tr>
  <tr>
   <td style="border-bottom: 1px solid black; padding: 0px; height: 180px; text-align: center;">
    <img src="./image.php?a=8&amp&b=2" />
   </td>
  </tr>
  <tr>
   <td style="border-top: 1px solid white; padding: 5px; height: 50px;">
    <span>
     <input size="13" value="" id="description35"> <input onclick="saveDescription(35)" value="»" type="button">
    </span>
   </td>
  </tr>
  <tr>
   <td >
    <span style="font-size: 10px;" onClick="Element.show('rightField35')">
     Wer darf dieses Bild sehen?
    </span>
    <div style="border: 1px solid black; z-index: 2; position: absolute; background-color: rgb(136, 136, 136); width: 200px; height: 200px; display: none;" id="rightField35">
     [AJAX content]
    </div>
   </td>
  </tr>
  <tr>
   <td>
    <small>
     <input value="Dieses Bild löschen" name="deleteImage[35]" style="border-style: solid; border-color: black; border-width: 0px 0px 1px; background-color: white; font-size: 10px; cursor: pointer;" type="submit">
    </small>
   </td>
  </tr>
 </tbody>
</table>

<table id="tl_39" style="border: 1px solid black; margin: 10px; padding: 5px; z-index: 1; float: left; width: 170px; height: 320px; position: relative;">
 <tbody>
  <tr>
   <td style="border: 1px dotted rgb(136, 136, 136); padding: 0px; cursor: move; height: 20px; text-align: center; font-size: 10px;">
    zum Verschieben hier ziehen
   </td>
  </tr>
  <tr>
   <td style="border-bottom: 1px solid black; padding: 0px; height: 180px; text-align: center;">
    <img src="./image.php?a=39&amp&b=2">
   </td>
  </tr>
  <tr>
   <td style="border-top: 1px solid white; padding: 5px; height: 50px;">
    <span><input size="13" value="" id="description39"> <input onclick="saveDescription(39)" value="»" type="button"></span>
   </td>
  </tr>
  <tr>
   <td>
    <span style="font-size: 10px;" onClick="Element.show('rightField39')">
     Wer darf dieses Bild sehen?
    </span>
    <div style="border: 1px solid black; z-index: 2; position: absolute; background-color: rgb(136, 136, 136); width: 200px; height: 200px; display: none;" id="rightField39">
     [AJAX content]
    </div>
   </td>
  </tr>
  <tr>
   <td>
    <small>
     <input value="Dieses Bild löschen" name="deleteImage[39]" style="border-style: solid; border-color: black; border-width: 0px 0px 1px; background-color: white; font-size: 10px; cursor: pointer;" type="submit">
    </small>
   </td>
  </tr>
 </tbody>
</table>

...

die einzelnen <table> elemente sind via Drag&Drop verschiebbar, aber das sollte eigentlich nichts zur sache tun

 

[Maik]

Da wirst du dir grundsätzlich was anderes überlegen müssen, denn ein Nachfolgeelement (hier: div) kann keine höhere Schichtposition wie sein Elternelement (hier: table) besitzen.

mfg Maik

 

[andrutz]

aja interessant, vielen dank.
lösung: dem <table> keinen z-index zuweisen, sondern nur dem verschachtelten div element