Kann kein inneres div bekommen, um ein äußeres div zu überlagern

Question

Ich habe eine Situation wie im Screenshot unten gezeigt, wo ich möchte, dass ein inneres div ein äußeres div überlagert, wenn das äußere div ein CSS von position:relative hat. Ich habe versucht, dies zu tun, die Sie in den folgenden Online-Demo sehen: Demo of my code

• Ich habe zwei JavaScript-Methoden genannt Overlay und undoOverlay.
• Wenn ich die Overlay-Methode aufrufen, werden die ID von div zu überlagern und ID von div zu überdecken, aber es ergibt sich nicht in der gelben div zu decken/Overlay der äußeren orange div.
• Die Methode undoOverlay gibt das überlagerte Div in seinen ursprünglichen Zustand zurück.

Frage: Wie kann ich die Methode overlay Arbeit wie erwartet das heißt, es den gelben div die orangefarbene div genau Overlay verursachen sollte/abdecken?

JavaScript-Code Ich habe für diese Situation versucht

<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

<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> 

Answer 3

Sie absolut nicht JS brauchen dafür. Positionieren Sie einfach das innere Div mit position: absolute.

Fügen Sie diese auf Ihre innere div:

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