Wie können zwei Divs die gleiche Position haben?

Question

Ich möchte zwei divs machen, die die Größe und Position haben, aber nur eins zu einer Zeit sichtbar sein und in der Lage sein, zwischen ihnen zu wechseln. Ich kann das zweite div mit position: absolute positionieren, aber die Breiten des div sind nicht gleich. Gibt es eine Möglichkeit, dies zu tun? Ich könnte das Problem nur falsch angehen. Diese ist das, was ich bisher:

  div(class = "Control", id = "controlOne") 
       div(id ="toggle") 
        input(type = "button",id = "pbtn", value = "one", onclick = "toggleTab('one');") 
        input(type = "button",id = "tbtn", value = "two", onclick = "toggleTab('two');") 
      div(class = "Control", id = "controlTwo", style = "visibility: collapse") 
       div(id ="toggle") 
        input(type = "button",id = "pbtn", value = "one", onclick = "toggleTab('one');") 
        input(type = "button",id = "tbtn", value = "two", onclick = "toggleTab('two');") 

    function toggleTab(tabID){ 
     if(tabID == "one"){ 
      document.getElementById("controlTwo").style.visibility = "collapse"; 
      document.getElementById("controlOne").style.visibility = "visible"; 
     } else { 
      document.getElementById("controlOne").style.visibility = "visible"; 
      document.getElementById("controlTwo").style.visibility = "collapse"; 
     } 
    } 

#controlOne{ 
    height: 50%; 
    width: 50%; 
} 
#controlTwo{ 
    height: 50%; 
    width: 50%; 
} 

Answer 1

Anfügen Sie Kind div s in einem Hauptbehälter sind und position: relative CSS verwenden, dann div s position: absolute zu Kind verwenden und fügen Sie die Sichtbarkeit auf die div sollte sichtbar sein oder nicht .

.controlls { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.controll1 { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 50%; 
 
    height: 50px; 
 
    background: red; 
 
} 
 

 
.controll2 { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    width: 50%; 
 
    height: 50px; 
 
    background: blue; 
 
}

<div class="controlls"> 
 
    <div class="controll1"> 
 
    asd1 
 
    </div> 
 
    <div class="controll2"> 
 
    asd2 
 
    </div> 
 
</div>

Answer 2

Die Lösung ist ein Elternteil div als relative und das Kind als absolut zu haben.

Es gibt ein paar Probleme mit dem Code, den Sie geschrieben: - Ich kann nicht div „controlTwo“ sehen - Es gibt zwei divs mit derselben ID „Toggle“