Position Property & Positioning Context Demo

dabblet.css

/**
 * Position Property & Positioning Context Demo
 */
div {
	padding: 10px;
}
.main {
	width: auto;
	border: 5px solid lightgreen;	
	background-color: AliceBlue;
	/*position: relative;*/
}
.box { 
	width: 150px; height: 150px; 
	border: 1px dashed black;
	background: hsla(25, 75%, 47%, 0.7);
	/*position: relative;*/
}
.box-child {
	width: 40%; height: 40%;
	background: hsla(10, 75%, 47%, 0.5);
	/*position: absolute;*/
}


.popup {
	background: hsla(225, 75%, 47%, 0.7);
	width: 40%; height: 100px;
	position: fixed;
	top: 20%; left: 20%;
	z-index: 1;
}

dabblet.html

<div class="main">	
	<strong>.main</strong>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias mollitia maxime aut minima quidem voluptatibus animi quo, in iste, pariatur eveniet sequi explicabo necessitatibus, nihil quasi. Unde, numquam dignissimos reiciendis.
	<div class="box">
		.box
		<div class="box-child">
			.box-child
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}