JSFiddle - React, Tailwind, and code Playground

by laiqs2011

HTML

<div id="box-container">
	<div id="box-red">
    box-red  z-index: 2
	  <div id="box-red-child">box-red-child z-index: 888</div>   
	</div>
	<div id="box-green">
    box-green z-index: 1
	  <div id="box-green-child">z-index: 999</div>
	</div> 
</div>

CSS

#box-container {
		position: relative;  
		height: 200px;   
		background: gray;
    padding: 10px;
	}
	#box-red {
		position: absolute; top: 10px; left: 10px;
    z-index: 2;   
    width: 50%;
		height: 100px;
		background: rgba(255, 0, 0, .5);
	}
	#box-green {
	  position: absolute; top: 40px; left: 100px;
    z-index: 1;   
    width: 50%;
		height:100px;
		background: rgba(0, 255, 0, .5);
	}
  #box-red-child {
    position: absolute; top: 30px; left: 10px;  
    z-index: 888;
    width: 50%;
    height: 50%;
    background: rgba(200, 0, 0, 1);
    outline: solid blue 1px;
  }
  #box-green-child {   
    position: absolute; top: 40px; left: 10px;  
    z-index: 999;
    width: 50%;
    height: 50%;
    background: rgba(0, 200, 0, 1);
    text-align: right;
    outline: solid blue 1px;
  }