在页面中重叠div

Question

嗨，我正在建立这个迷你页面。

我需要一个div，当点击一个按钮时，它有一个表来覆盖另一个带有表格的div

点击链接前的我的页面：

点击按钮后我的页面：

我们可以看到，这两个div的表都是可见的。 我不想要它。我想要一个div来完全覆盖另一个div。

我该怎么做？

Answer 1

我认为使用z-index是可以的，会使一个div在另一个“顶部”，但是当你点击另一个时你可以使用javascript来隐藏/显示div！

类似的东西：

<div id="tab_one" onmousedown="showDivOne()"></div>
<div id="tab_two" onmousedown="showDivTwo()"></div>

<script>

function showDivOne(){

  var tabOne = document.getElementById('tab_one');
  var tabTwo = document.getElementById('tab_two');

  if(tabOne.style="none"){
     tabOne.style.display="block"
     tabTwo.style.display="none"
}

}

function showDivTwo(){

  var tabOne = document.getElementById('tab_one');
  var tabTwo = document.getElementById('tab_two');

  if(tabTwo.style="none"){
     tabTwo.style.display="block"
     tabOne.style.display="none"
}

}

</script>

通过使用这样的东西，你将通过用javascript更改css中的显示值来隐藏/显示div！希望它有所帮助。

Answer 2

为此，如果你想让一个div与另一个div重叠，看起来你需要将div表设为绝对值。

例如：

divtable1{ position absolute; z-index: 1;  }
divtable2{ position: absolute; z-index:2;  }

在这种情况下，divtable2将与divtable1重叠。你需要添加额外的css / html来显示/隐藏divtable2，当它正在使用/不使用时，否则它只会相互重叠。