problem mit darstellung von mehreren div elementen

andrutz

Mitglied
Hallo Leute,

ich habe folgendes Problem:
Ich habe lauter position:relative divs [1,2,3,4] nebeneinander und untereinander aufgereit, das muss so sein.

In jedem div[1,2,3,4] gibt es ein unter div[1.1, 2.1, 3.1, 4.1], was position:absolute ist, damit es keinen Einfluss auf die größe der divs[1,2,3,4] hat.

alle divs werden nacheinander definiert
div 1
div 1.1
div 2
div 2.2
...

problem ist, dass es der browser so ausgibt:
Code:
-----------------------------          -----------------------------
|    div 1                        |           |    div 2                        | 
|                                    |           |                                    |
|                                    |           |                                    |
|                                    |           |                                    |
|                                    |           |                                    |
|                 -----------------------------                             |
|                 |    div 1.1               |     |                             |
------------- |                              |----| ----------------------
                  |                                     |
--------------|--------------          ------|-----------------------
|    div 3     |                  |          |     d|iv 4                       | 
|                 |                  |          |       |                             |
|                 |                  |          |       |                             |
|                 ------------------------------                            |
|                                    |           |                                    |
|                                    |           |                                    |
|                                    |           |                                    |
-----------------------------          -----------------------------

und so soll es sein:
Code:
-----------------------------          -----------------------------
|    div 1                        |           |    div 2                        | 
|                                    |           |                                    |
|                                    |           |                                    |
|                                    |           |                                    |
|                                    |           |                                    |
|                 -----------------------------                             |
|                 |    div 1.1                     |                             |
------------- |                                     | ----------------------
                  |                                     |
--------------|                                     |-----------------------
|    div 3     |                                     |iv 4                       | 
|                 |                                     |                             |
|                 |                                     |                             |
|                 ------------------------------                            |
|                                    |           |                                    |
|                                    |           |                                    |
|                                    |           |                                    |
-----------------------------          -----------------------------
Haha, das sieht ja völlig konfus aus, aber wenn man genau hinschaut, sieht man, dass im ersten beispiel die divs[2,3,4] die das unterdiv[1.1] überlappen, und so soll es nicht sein. siehe 2. beispiel


Könnt Ihr mir bitte bitte helfen ? :)
 
M

Maik

Hi,

könnte sich dem Anschein nach um ein Schichtpositionierungsproblem handeln, das sich dann problemlos mit der z-index-Eigenschaft beheben lässt.

Ansonsten solltest du anstelle des Versuchs, und bevor du dir die Finger dabei brichst, das Layout nachzuskizzieren, hier deinen HTML- und CSS-Code posten, damit man darauf auch näher eingehen kann, denn aus dieser Skizze lässt sich die Ursache nicht mit Sicherheit ablesen.

mfg Maik
 

andrutz

Mitglied
sehr guter lösungsansatz, aber leider hat das nichts bewirkt.
code:
HTML:
<div id="tableTree" style="height: 1020px; position: relative;">
 
 <table id="tl_30" style="border: 1px solid black; margin: 10px; padding: 5px; float: left; width: 170px; height: 320px; position: relative;">
  <tbody>
   <tr>
    <td>
     <span style="font-size: 10px;" onClick="Element.show('rightField30')">
      Text
     </span>
     <div style="border: 1px solid black; position: absolute; background-color: rgb(136, 136, 136); width: 200px; height: 200px; display: none;" id="rightField30">
      Eingeblendetes div Element
     </div>
    </td>
   </tr>
  </tbody>
 </table>
 
 <table ..>
 
 ..
 </table>
 
 ...
 
 .....
 
</div>
 
M

Maik

Und wo sind da nun die übrigen eingangs genannten DIVs versteckt? :suspekt:

mfg Maik
 

andrutz

Mitglied
genau.... da:
HTML:
     <div style="border: 1px solid black; position: absolute; background-color: rgb(136, 136, 136); width: 200px; height: 200px; display: none;" id="rightField30">
      Eingeblendetes div Element
     </div>

das <table> tag befinded sich in einer php schleife.. deswegen die ....................
 
Zuletzt bearbeitet:

andrutz

Mitglied
ganz einfach:

gegeben:

viele <table style="position:relative;"> tags mit jeweils einem <div style="position:relative;"> tag drin, das über das <table> tag hinausgeht und auch teilweise andere <table> elemente überdeckt

problem:

das <div> tag liegt über dem <table> element, dem es entstammt, aber unter den anderen <table> elementen

frage:

wie schaffe ich es, dass das <div> element über jedem <table> element liegt ?