JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box-container">
	<div id="box-red">
    box-red
	  <div id="box-red-child">box-red-child</div>   
	</div>
	<div id="box-green">
    box-green
	  <div id="box-green-child">box-green-child</div>
	</div> 
</div>

CSS

#box-container {
		position: relative; 
    z-index: 1; /* 创建新的层叠上下文 */
		height: 400px;   
		background: gray;
    padding: 10px;
	}
	#box-red {
		position: relative;
    width: 50%;
		height: 100px;
		background: rgba(255, 0, 0, .5);
	}
	#box-green {
	  position: relative;
    width: 50%;
		height:100px;
		background: rgba(0, 255, 0, .5);
    margin-top: 10px;
	}
  #box-red-child {
    position: absolute; top: 30px; left: 100px;  
    z-index: 2; /* 参与层叠上下文的计算 */
    width: 50%;
    height: 200px;
    background: rgba(200, 0, 0, 1);
    outline: solid blue 1px;
  }
  #box-green-child {   
    position: absolute; top: 40px; left: 130px;  
    z-index: 1; /* 参与层叠上下文的计算 */
    width: 50%;
    height: 150px;
    background: rgba(0, 200, 0, 1);
    outline: solid blue 1px;
  }