我可以將div擴展到嵌套在另一個div下面的全屏嗎？

Question

我有一個設計，我想要編碼，並希望藍色div在點擊時展開，儘管它在黃色div後面是nexted。有人能幫忙嗎？ enter image description here

謝謝！

Answer 1

也許你需要的東西是這樣的：

$('.back').on('click',function(){ 
 
\t if ($(this).hasClass('expanded')) { $(this).removeClass('expanded'); } 
 
\t else $(this).addClass('expanded'); 
 
})

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.back { 
 
    position: absolute; 
 
    z-index:0; 
 
    top:0px; 
 
    left:20px; 
 
    background-color:blue; 
 
} 
 
.front { 
 
    position: absolute; 
 
    z-index:1; 
 
    top:20px; 
 
    left:0px; 
 
    background-color:yellow; 
 
} 
 
.expanded { 
 
    z-index:2; 
 
    width:100%; 
 
    height:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box front"></div> 
 
<div class="box back"></div>