我可以将div扩展为嵌套在另一个div下面的全屏吗？

Question

我有一个我想要编码的设计，并希望蓝色div在点击时扩展，尽管它在黄色div后面。任何人都可以帮忙吗？enter image description here

谢谢！

Answer 1

也许你需要这样的东西：

$('.back').on('click',function(){
	if ( $(this).hasClass('expanded') ) { $(this).removeClass('expanded'); }
	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>