无法获得内部div来覆盖外部div

Question

我有一种情况，如下面的屏幕截图所示，当外部div的CSS为position:relative时，我希望内部div覆盖外部div。我尝试过这样做，您可以在以下在线演示中看到：Demo of my code

• 我有两个名为 overlay 和 undoOverlay 的JavaScript方法。
• 当我调用 overlay 方法时，传递div的id和div的id将被传递，但它不会导致黄色div覆盖/覆盖外部的橙色div。
• undoOverlay 方法将重叠的div返回到原始状态。

问题：如何让方法overlay按预期工作，即它应该使黄色div完全覆盖/覆盖橙色div？

我为这种情况尝试过的JavaScript代码

<button type="button" onclick="overlay('div2','div1');">Overlay Yellow Div on Orange Div</button>&nbsp;&nbsp;
<button type="button" onclick="undoOverlay('div2');">UNDO Overlay</button>
<br><br>
<div id="div1" style="position:relative;background-color:orange;border:2px solid red;height:500px;width:300px;">This is OUTER div
<div id="div2" style="background-color:lightyellow;border:2px solid green;height:400px;width:270px;">This is INNER div</div>
</div>

<script>
//original dimensions of div to show when overlaying
var originalWidth = null;
var originalHeight = null;

//makes first div to exactly cover the second div
function overlay(divIdToShow, divIdToCover) {
   originalWidth = document.getElementById(divIdToShow).style.width;
   originalHeight = document.getElementById(divIdToShow).style.height;
   document.getElementById(divIdToShow).style.width =  document.getElementById(divIdToCover).style.width;
   document.getElementById(divIdToShow).style.height =  document.getElementById(divIdToCover).style.height;
}

//returns an overlayed div to it's original state
function undoOverlay(divId) {
   document.getElementById(divId).style.width =  originalWidth;;
   document.getElementById(divId).style.height =  originalHeight;
}
</script>

Answer 1

#div1 {
  position:relative;
  background-color:orange;
  /*border:2px solid red;*/
  outline:2px solid red;
  height:500px;
  width:300px;
}
#div2 {
  background-color:lightyellow;
  /*border:2px solid green;*/
  outline:2px solid green;
  /*height:400px;*/
  /*width:270px;*/
  /*display: none;*/
}
.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.normal {
  height: 400px;
  width: 270px;
}

<button type="button" onclick="toggleOverlay('div2',true);">Overlay Yellow Div on Orange Div</button>&nbsp;&nbsp;
<button type="button" onclick="toggleOverlay('div2',false);">UNDO Overlay</button>
<br><br>
<div id="div1" style="">This is Orange BASE div
<div id="div2" class="normal" style="">This is Yellow OVERLAY div</div>
</div>

<script>
//var originalWidth = document.getElementById(divIdToShow).style.width + "px";
//var originalHeight = document.getElementById(divIdToShow).style.height + "px";
  
function toggleOverlay(id, show) {
  if (show) {
    //makes first div to exactly cover the second div
    document.getElementById(id).removeAttribute('class'); 
    document.getElementById(id).className = "overlay";
  }
  else {
    //returns an overlayed div to it's original height and width
    document.getElementById(id).removeAttribute('class'); 
    document.getElementById(id).className = "normal";
  }
}
</script>

Answer 2

你绝对不需要JS。只需使用position: absolute定位内部div。

将此添加到您的内部div：

position: absolute; 
top: 0; 
left: 0;
width: 100%;
height: 100%;

Answer 3

<button type="button" onclick="overlay('div2','div1');">Overlay Yellow Div on Orange Div</button>&nbsp;&nbsp;
<button type="button" onclick="undoOverlay('div2');">UNDO Overlay</button>
<br><br>
<div id="div1" style="position:relative;background-color:orange;border:2px solid red;height:500px;width:300px;">This is OUTER div
<div id="div2" style="background-color:lightyellow;border:2px solid green;min-height:400px;min-width:270px;">This is INNER div</div>
</div>

<script>
//original dimensions of div to show when overlaying
var originalWidth = null;
var originalHeight = null;

function overlay(divIdToShow, divIdToCover) {
   originalWidth = document.getElementById(divIdToShow).style.width;
   originalHeight = document.getElementById(divIdToShow).style.height;
   document.getElementById(divIdToShow).style.position = "absolute";  
   document.getElementById(divIdToShow).style.top = '0';
   document.getElementById(divIdToShow).style.bottom = '0';
   document.getElementById(divIdToShow).style.left = '0';
   document.getElementById(divIdToShow).style.right = '0';
}
function undoOverlay(divId) {
   document.getElementById(divId).style.width =  originalWidth;;
   document.getElementById(divId).style.height =  originalHeight;
}
</script>