Position Property & Positioning Context Demo

dabblet.css

/**
 * Position Property & Positioning Context Demo
 */
div {
	padding: 10px;
	/*NOTE: box-sizing is natural (content-box)*/
}
.main {
	width: auto;
	border: 5px solid lightgreen;	
	background-color: AliceBlue;
}
.box { 
	width: 200px; height: 100px; 
	border: 2px dashed hsla(25, 75%, 20%, 0.8);
	background: hsla(25, 75%, 47%, 0.7);
	/*position: absolute;*/
}
.box-child {
	width: 50px; height: 50px;
	background: hsla(10, 75%, 47%, 0.5);
	/*position: absolute;*/
}

dabblet.html

<h1>Position Property & Positioning Contexts</h1>
<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>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

dabblet.js

// alert('Hello world!');

settings.json

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