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

Question

I have a situation as shown in screen shot below where I would like an inner div to overlay an outer div when outer div has a CSS of position:relative . I have tried to do this, which you can see in following online demo: Demo of my code

• I have two JavaScript methods called overlay and undoOverlay .
• When I call the overlay method, the id of div to overlay and id of div to cover are passed, but it does not result in the yellow div to cover/overlay the outer orange div.
• The undoOverlay method returns the overlayed div to it's original state.

Question : How can I make the method overlay work as expected ie it should cause the yellow div to exactly overlay/cover the orange div?

JavaScript code I have tried for this situation

<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

You absolutely do not need JS for this. Just position the inner div with position: absolute .

Add this to your inner 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>