divs sollen sich gegenseitig überlagern

[Sabine]

Hallo liebe Gemeinde der Wissenden,

ich verzweifle langsam an meinem Problem nach einiger Suche wende ich mich nun an euch.

Ich habe ein DIV, in dem sich eine Aufzählung (UL/LI) nebeneinander (inline) angeordnet befindet. Ein LI besteht aus einem DIV und darunter befindet sich ein IMG. Das obere DIV wird nur bei onMouseOver angezeigt, also jeweils max. eins gleichzeitig. Die Bilder darunter sind recht klein, daher würde ich die darüberliegenden DIVs gerne gegenseitig überlappen lassen. Welchen Zauberspruch muss ich nun dafür einsetzen?

Bisher habe ich über Suchmaschinen gefunden, dass ich position:absolute statt relative einsetzen soll, wie positioniere ich die Elemente dann automatisiert nebeneinander (relativ zueinander)? Ein z-index würde ja theoretisch nicht helfen, weil sich alle LIs/DIVs auf der gleichen Ebene befinden sollen.

Etwas Code habe ich auch noch:

  
<style type="text/css">  
 <!--  
 div.slider_bubble {  
  position:relative;  
  visibility:visible;  
  background:url(/' . path_to_theme() . '/img/bubble.gif) no-repeat;  
  width:107px;  
  height:64px;  
  text-align:center;  
 }  
 ul#slider {  
  display:inline;  
  list-style:none;  
  float:left;  
  width:41.5em;  
  text-align:center;  
  position:relative;  
  left:-1em;  
 }  
 li.slider {  
  display:inline;  
  float:left;  
  padding:2em 0 2em 0;  
  z-index:auto;  
 }  
 span.slider_text {  
  display:inline;  
  position:relative;  
  top:5px;  
 }  
 -->  
</style>  

  
<ul id="slider">  
 <li class="slider">  
  <div id="die1" class="slider_bubble">  
   <span class="slider_text">Lorem<br />aa</span>  
  </div>  
  <img src="/' . path_to_theme() . '/img/ico_1.gif" alt=""  
    onMouseOver="showBubble(\'die1\')" onMouseOut="hideBubble(\'die1\')" />  
 </li>  
  
 <li class="slider">  
  <div id="die2" class="slider_bubble">  
   <span class="slider_text">ipsum<br />aa</span>  
  </div>  
  <img src="/' . path_to_theme() . '/img/ico_2e.gif" alt=""  
    onMouseOver="showBubble(\'die2\')" onMouseOut="hideBubble(\'die2\')" />  
 </li>  
  
 <li class="slider">  
  <div id="die3" class="slider_bubble">  
   <span class="slider_text">dolor<br />aa</span>  
  </div>  
  <img src="/' . path_to_theme() . '/img/ico_3.gif" alt=""  
    onMouseOver="showBubble(\'die3\')" onMouseOut="hideBubble(\'die3\')" />  
 </li>  
  
 <li class="slider">  
  <div id="die4" class="slider_bubble">  
   <span class="slider_text">sit<br />bb</span>  
  </div>  
  <img src="/' . path_to_theme() . '/img/ico_4.gif" alt=""  
    onMouseOver="showBubble(\'die4\')" onMouseOut="hideBubble(\'die4\')" />  
 </li>  
  
 <li class="slider">  
  <div id="die5" class="slider_bubble">  
   <span class="slider_text">amet<br />cc</span>  
  </div>  
  <img src="/' . path_to_theme() . '/img/ico_5.gif" alt=""  
    onMouseOver="showBubble(\'die5\')" onMouseOut="hideBubble(\'die5\')" />  
 </li>  
  
 <li class="slider">  
  <div id="die6" class="slider_bubble">  
   <span class="slider_text">usw.<br />dd</span>  
  </div>  
  <img src="/' . path_to_theme() . '/img/ico_6.gif" alt=""  
    onMouseOver="showBubble(\'die6\')" onMouseOut="hideBubble(\'die6\')" />  
 </li>  
  
 <li class="slider">  
  <div id="die7" class="slider_bubble">  
   <span class="slider_text">usf.<br />ee</span>  
  </div>  
  <img src="/' . path_to_theme() . '/img/ico_7.gif" alt=""  
    onMouseOver="showBubble(\'die7\')" onMouseOut="hideBubble(\'die7\')" />  
 </li>  
</ul>  

PS: path_to_theme() ist PHP.

Grüße von der Sabine

[Beat]

Ich habe ein DIV, in dem sich eine Aufzählung (UL/LI) nebeneinander (inline) angeordnet befindet. Ein LI besteht aus einem DIV und darunter befindet sich ein IMG. Das obere DIV wird nur bei onMouseOver angezeigt, also jeweils max. eins gleichzeitig. Die Bilder darunter sind recht klein, daher würde ich die darüberliegenden DIVs gerne gegenseitig überlappen

Schon mit negativen margins versucht?

mfg Beat

[Sabine]

Schon mit negativen margins versucht?

Ohje, ich habe so viel probiert und sah den Wald vor lauter Bäumen nicht.

So funktioniert es, vielen Dank und
liebe Grüße