JSFiddle - React, Tailwind, and code Playground

by laiqs2011

HTML

<div id="box-container">
	<div id="box-red">static</div>
	<div id="box-green">float</div>
  <div id="box-blue">absolute</div>
  <div id="box-yellow">absolute</div>
</div>

CSS

#box-container {
		position: relative;  
		height: 200px;   
		background: gray;
    padding: 10px;
	}
	#box-red {
		position: static; top: 10px; left: 10px;
    width: 50%;
		height: 50px;
		background: red;
	}
	#box-green {
	  float: left;
    width: 50%;
		height: 50px;
		background: green;
    margin-top: -20px;
    margin-left: 20px;
	}
  #box-blue {
	  position: absolute; top: 20px; left: 110px;
    z-index: 2;   
    width: 50%;
		height: 50px;
		background: blue;
	}
  #box-yellow {
	  position: absolute; top: 30px; left: 140px;
    z-index: 1;   
    width: 50%;
		height: 50px;
		background: yellow;
	}