Mischen Absolute Positionierung, Relative Positionierung von DIVS

Okay, möchte ich die folgende WirkungMischen Absolute Positionierung, Relative Positionierung von DIVS

Ich habe zwei Divs erreichen, die auf der jeweils anderen sein sollte. Ich habe eine dritte Div, die direkt unter den zwei Divs sein sollte. Die ersten beiden divs können die Sichtbarkeit umschalten, so dass, wenn eins sichtbar ist, das andere nicht (Hinweis: Ich habe den Umschalter im JavaScript entfernt, um die Fehlersuche zu vereinfachen). Aber unabhängig davon sollte das dritte div unter den anderen zwei sein. Klingt einfach vor ein paar Stunden, aber ich vermisse etwas und würde Ihre Hilfe zu schätzen wissen.

Ich erstellte eine zusammengepasste HTML-Datei mit nur den wichtigen Teilen für Sie zu überprüfen und hoffentlich zeigen Sie mir, was ich falsch verstehe.

Beachten Sie auch, dass ich wirklich keine Top-Eigenschaft auf Div3 verwenden möchte, da es möglich ist, dass ich die Größe der ersten zwei Divs dynamisch ändern möchte.

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script> 
     function clicked(t) { 
      t.style.visibility = "collapse"; 
      t.style.opacity = 0.0; 
     } 
    </script> 
</head> 
<body> 
    <div class="container"> 
     <div id="divone" class="one" onclick="clicked(this)"></div> 
     <div id="divtwo" class="two" onclick="clicked(this)"></div> 
     <div class="three"></div> 
    </div> 

    <style> 
     div { 
      height: 100px; 
      width: 100%; 
      transition-duration: 2s; 
     } 

      div.container { 
       width: 50%; 
       top: 0; 
       margin-left: 0px; 
       margin-top: 0px; 
       border-left: 0px; 
       border-top: 0px; 
       padding-left: 0px; 
       padding-top: 0px; 
      } 

      div.one { 
       position: absolute; 
       background-color: red; 
       width: 50%; 
       opacity: 1.0; 
       z-index:2; 
      } 

      div.two { 
       position: absolute; 
       background-color: green; 
       width: 50%; 

       opacity: 1.0; 
       z-index: 1; 
      } 

      div.three { 
       position: relative; 
       top: 0; 
       width: 60%; 
       background-color: blue; 
      } 
    </style> 
</body> 

</html>

Quelle

2016-03-18 Abraham Lincoln

brauchen eine bessere Beschreibung dessen, was geschehen soll. Wenn ich darauf klicke, bekomme ich zwei Zustandsänderungen. – Rob

Yup, Sie sehen jedes der ersten zwei Divs verschwinden. Sobald beide verschwinden, möchte ich, dass das dritte Div sich nach oben bewegt, um das Feld zu füllen. Das ist nicht genau das, was ich zu tun suche, aber wenn ich diesen vereinfachten Fall verstehe, kann ich zu dem kommen, was ich wirklich tun möchte. –

Aber ich sehe das dritte div am Ende. – Rob

Try this:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 

    <style> 

     div { 
      height: 100px; 
      width: 100%; 
      transition-duration: 2s; 
     } 

     div.container { 
      width: 50%; 
      top: 0; 
      margin-left: 0px; 
      margin-top: 0px; 
      border-left: 0px; 
      border-top: 0px; 
      padding-left: 0px; 
      padding-top: 0px; 
     } 

     div.one { 
      background-color: red; 
      width: 50%; 
     } 

     div.two { 
      background-color: green; 
      width: 50%; 
      display:none; 
     } 

     div.three { 
      width: 50%; 
      background-color: blue; 
     } 

    </style> 

    <script> 
     function clicked(t) { 
      t.style.display = "none"; 

      if (t.id === 'divone') { 
       document.getElementById('divtwo').style.display = 'block'; 
      } else { 
       document.getElementById('divone').style.display = 'block'; 
      } 
     } 
    </script> 
</head> 
<body> 
    <div class="container"> 
     <div id="divone" class="one" onclick="clicked(this)">DIV 1</div> 
     <div id="divtwo" class="two" onclick="clicked(this)">DIV 2</div> 
     <div class="three">DIV3</div> 
    </div> 
</body> 

</html>

Quelle

2016-03-18 20:45:53 wawawoom

Danke, das ist genau das, was ich suche. Ich habe deinen Code ein wenig geändert, damit div 1 und 2 verschwinden und div 3 sich entsprechend bewegen kann. Ich habe dies als die richtige Antwort gewählt und würde es abstimmen, aber habe noch nicht genug Reputation ... Also scheint es, dass es das Display ist: "Block" ist was ich vermisst wurde? –

Sie haben die absolute Positionierung verwendet, möchten aber statische Positionierungen vornehmen. Das war das Hauptproblem. Überprüfen Sie die Unterschiede im CSS-Code. – wawawoom

Vielen Dank! –

Mischen Absolute Positionierung, Relative Positionierung von DIVS

Antwort

Verwandte Themen