如何在另一个后面显示一个巨大的div

Question

为了解释自己，这是一些我想要做的画： Picture

因此，如您所见，在我的div标签中，有一个黑色和白色矩形，黑色div前面有一个白色矩形。白色的div有一个孔，我们可以看到黑色的孔。而且，孔中间的圆圈属于白色div。

因此，在我的代码中，我想使用箭头键将黑色div移动到 给白色圆圈以运动感。

我正在使用reactjs来创建这个项目。

预先感谢

Answer 1

css属性z-index。如果两个元素overlap，则顶部显示的element将由z-index确定。这是两个<div>

的示例

#big{
	background-color:red;
	height:500px;
	width:500px;
	z-index:-1;
	position: relative;
}
#small{
	background-color:orange;
	height:200px;
	width:200px;
	position: absolute;
	top: 50%;
	left: 50%;
}

<div id="big"><div id="small"></div></div>