如何让两个div有相同的位置？

Question

我想制作两个具有大小和位置的 div，但一次只有一个可见并且能够在它们之间切换。我可以使用 position:absolute 定位第二个 div，但 div 的宽度不一样。有没有办法做到这一点？我可能只是以错误的方式处理问题。这是我目前所拥有的：

            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

在主容器中添加 child div 并使用 CSS position: relative，然后使用 position: absolute 到 child divs 并添加 div 应该可见或不可见的可见性。

.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

解决方案是将 parent div 作为相对值，将 child 作为绝对值。

您发布的代码有几个问题： - 我看不到 div "controlTwo" - 有两个 div 具有相同的 id "toggle"

如何让两个div有相同的位置？

How to make two divs have the same position?

html

css

visibility

css-position

pug