Positionieren einer Div unter einem anderen DIV

Ive hat zwei DIV-Elemente, von denen eines absolute Position hat (linke untere Ecke des Haupt-DIV). Der zweite DIV ist ausgeblendet und wird nur durch Klicken auf einen Link angezeigt.Positionieren einer Div unter einem anderen DIV

Ich brauche den zweiten, der direkt unter dem ersten erscheint. Aber da die Position des ersten DIV absolut ist, erscheint die zweite über der ersten.

HTML-Code:

<div class ="main-div"> 
     <div class = "wrapper"> 
     <div class ="first-div"> 
     <a href ="blah"> <span>my link</span> </a> 
     //this is absolute positioned 
     </div> 
    <div class ="second-div"> 
     //this only appears after clicking on a link 
     <form> 
      <textarea> 
      </textarea> 
     </form> 
    </div> 
    </div> 
</div>

CSS:

div.wrapper { 
    width:inherit; 
    float:left; 
    bottom:6px; 
    position:absolute; 
    padding: 0 0 0 0; 
    overflow: auto; 
    } 

    div.second-div { 
     padding-top: 2px 
    } 

    div.main-div{ 
     background:{colour} url({image}) no-repeat 0 100%; 
    width:557px; 
    padding:8px 13px 4px 13px; 
    min-height:61px; 
    position:relative; 
}

Vielen Dank im Voraus für jede Hilfe.

Quelle

2009-12-15 fireBand

Können Sie bitte die "Code" -Abschnitte Ihrer Frage auswählen, damit sie leichter lesbar sind? – Michael

Ich denke, die Lösung beinhaltet Folgendes. Haben Sie einen Wrapper div:

<div id="my_wrapper"> 
    content 
</div>

Haben Sie dieses div absolut positioniert. Dann haben Sie innerhalb dieses div zwei divs, Ihr sichtbares div und dasjenige, das sichtbar werden muss.

<div id="my_wrapper"> 
    <div id="visible_item">Item</div> 
    <div id="may_become_visible">Not Visible Now Item</div> 
</div>

Dann können Sie nach Bedarf ein-/ausblenden und den Inhalt der Innenseite korrekt positionieren.

Quelle

2009-12-15 18:12:13 Michael

Das ist eine gute Idee. Ich würde vorschlagen, dass er das zuerst versucht. –

Ich habe diese Lösung versucht, aber dint erarbeiten. Das Divider "Wrapper" muss für das unsichtbare div erweitert werden, das das Formularelement enthält. Aber wegen seiner absoluten Position expandiert der Textbereich innerhalb der Form nach oben und nur halb sichtbar. Ich muss die erste-div in der unteren linken Ecke der Haupt-Div (wenn die Second-Div ist versteckt) und Second-Div sollte an der Unterseite der First-Div erscheinen. Ist das bei relativer Positionierung möglich? – fireBand

Legen Sie keine spezifische Höhe für das äußere Div fest, sondern passen Sie sie je nach Inhalt an die erforderliche Höhe an. – Michael

Nur eine Vermutung, aber haben Sie versucht, den Stil klar hinzuzufügen: beide zum zweiten div? Ich bezweifle, dass es helfen wird, aber es könnte.

Sie können auch versuchen, einen oberen Rand für das zweite div hinzuzufügen, der gleich der Höhe des ersten div ist. Grundsätzlich so etwas wie:

<div id="second-div" style="padding-top: 40px">

Wo 40px ist die Höhe der ersten Div. Das Problem dort ist, dass Sie wissen müssen, wie hoch das erste Div ist und wenn es variabel ist, dann hilft dieser Ansatz nicht.

Quelle

2009-12-15 18:03:47

danke für die Antwort, es hat aber nicht funktioniert. Das Second-Div erscheint weiter unten, aber oben auf dem First-Div, das sich auch mit nach unten bewegt. – fireBand

Haben Sie versucht, die obere Polsterung von 40px zu erhöhen?Stellen Sie außerdem sicher, dass sich der obere Füllbereich auf dem zweiten div befindet und nicht auf dem Wrapper/main div. –

Ich habe beide Lösungen kombiniert aber trotzdem ist nur die Hälfte des "Wrapper-Div" sichtbar. Ich habe das Problem jedoch gefunden. Das "Wrapper" div erweitert sich, aber überschreitet Grenzen von "main-div". Ich denke, da die Position absolut ist, agiert sie unabhängig von der "Haupt-Div" Position. Da sich das "main-div" nicht entsprechend erweitert, kann nur die Hälfte des "wrapper" divs sichtbar sein. Ich habe meinen Beitrag mit neuen Elementen bearbeitet. – fireBand

Ok, mit euch auf dem Laufenden Frage, die ich glaube, ich erstellt habe, was Sie suchen mit den folgenden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<body> 
    <style> 
     HTML 
     { 
      margin: 0px; 
      padding: 0px; 
      height: 100%; 
     } 

     BODY 
     { 
      margin: 0px; 
      padding: 0px; 
      height: 100%; 
     } 

     div.first-div 
     { 
      width: inherit; 
      float: left; 
      bottom: 60px; 
      position: absolute; 
      padding: 0 0 0 0; 
      overflow: auto; 
     } 

     div.second-div 
     { 
      display: none; 
      position: absolute; 
      float: left; 
      bottom: 0px; 
     } 
     div.main-div 
     {  
      background:{colour} url({image}) no-repeat 0 100%; 
      width:557px; 
      min-height:61px; 
      position:relative; 
      float: left; 
      height: 100%; 
     } 
    </style> 
    <div class="main-div"> 
     <div id="firDiv" class="first-div"> 
      <a href="#" onClick="document.getElementById('secDiv').style.display='block';"><span>my link</span></a> 
      //this is absolute positioned 
     </div> 
     <div id="secDiv" class="second-div"> 
      //this only appears after clicking on a link 
      <form> 
       <textarea></textarea> 
      </form> 
     </div> 
     this is my content 
    </div> 
</body> 
</html>

Nun, was das bedeutet ist absolute Position der ersten und zweiten divs am Boden der Seite, so positioniert, dass sie sich nicht überlappen.

div.first-div 
{ 
    width: inherit; 
    float: left; 
    bottom: 20px; 
    position: absolute; 
    padding: 0 0 0 0; 
    overflow: auto; 
}

und aktualisieren Sie dann den Link zu

: Wenn Sie nicht wie die Tatsache, dass die erste div von unten nach oben auf der Seite so hoch ist, können Sie den ersten div style als solche ändern

<a href="#" onClick="document.getElementById('secDiv').style.display='block';document.getElementById('firDiv').style.bottom='60px';"><span>my link</span></a>

Im Grunde ändert sich das erste div so, dass es näher am unteren Rand der Seite ist, aber es wird verschoben, wenn der Link angeklickt wird, damit mehr Platz für das zweite div ist.

Es löst nicht das zugrunde liegende Problem, ein relativ positioniertes div unter einem absolut positionierten div anzuzeigen, aber hoffentlich löst es Ihr spezifisches Problem.

Quelle

2009-12-15 23:31:13

Positionieren einer Div unter einem anderen DIV

Antwort

Verwandte Themen