無法獲得內部div覆蓋外部div

Question

我有一種情況，如下面的屏幕截圖所示，當外部div具有position:relative的CSS時，我希望內部div覆蓋外部div。 我嘗試這樣做，您可以在下面的在線演示中看到： 我的代碼的演示

• 我有兩個JavaScript方法，稱為overlay和undoOverlay 。
• 當我調用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。 只需將內部div的position: absolute 。

將此添加到您的內部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>