• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Child-Div soll bei Klick Parent-Divs überlappen

Binary91

Neues Mitglied
Hallo zusammen,

ich habe eine Website mit mehreren, verschachtelten Divs und vielen Child-Divs derselben Ebene, wie hier angedeutet:
Code:
<div id="section_1">
  <div id="section_1_1">
    <div id="ddl">
      <ul class="ddl">
        <li>Element 1 der Dropdownlist</li>
        <li>Element 2 der Dropdownlist</li>
        <li>Element x der Dropdownlist</li>
      </ul>
    </div>
    <div id="text">
      <p>Dies ist der direkt unterhalb der DDL folgende Text, der unabhängig von der DDL nicht in seiner Position verändert werden sollte!</p>
    </div>
  </div>
</div>
Über JavaScript handle ich, dass die DropDown-Liste beim Klick auf das erste Element aufklappt und beim weiteren Klick auch wieder zuklappt.

Das Problem an der Sache ist jedoch folgendes:
Bisher habe ich einfach den Container der Liste relativ positioniert und mit 'zIndex' und 'overflow:visible' somit erreicht, dass der nachfolgende Container mit dem Text überlappt wird, ohne in seiner Position verändert zu werden.
Jetzt ist mir jedoch aufgefallen, dass mir zIndex nicht für übergeordnete Container hilft. Somit habe ich ein Problem, sobald die Liste im aufgeklapptem Zustand größer wird als der nachfolgende Text-Container, denn dann wird der Rest der Liste durch den Border des übergeordneten Containers "section_1_1" sowie "section_1" (haben hier ja denselben Border-Abschluss) abgeschnitten.

Die Höhe des DDL-Containers an die Liste anzupassen würde in einem Verschieben des nachfolgenden Text-Containers resultieren, was sehr hässlich wäre.
Weiterhin habe ich mir überlegt, in einer komplizierten JS-Routine alle übergeordneten Container zu identifizieren und deren overflow-Eigenschaft auf "visible" zu setzen. Allerdings hätte das ja auch enormen Einfluss auf die ganze Website, da somit jeglicher Scroll-Text plötzlich in andere Container überfließen würde.

Lange Rede, kurzer Sinn:
Ich suche eine Lösung, wie ich eine Liste aufklappen lassen kann, sodass sie sowohl nachfolgende Container/Elemente auf gleicher Ebene sowie die Grenzen aller übergeordneter Container überlappt.

Wie kann ich dieses Vorhaben realisieren?

Vielen Dank bereits vorab. Viele Grüße
Binary
 
Werbung:
Du müsstest das Element absolut positionieren und dabei das umgebende Element nicht-static positionieren (z.B. relativ). Btw. heißt es "z-index", nicht "zIndex".

Moderation: Verschoben von HTML zu CSS.
 
Zurück
Oben