Stacking Context Demo

dabblet.css

/**
 * Stacking Context Demo
 */
* { box-sizing: border-box; }
body { font-size: 20px; font-family: sans-serif; }
div {
	border: 1px dashed black;
	min-width: 10em;
	min-height: 5em;
	padding: 0.5em 1em;
	text-shadow: 0 0 1px white;
}
.main {
	width: auto;
	border-style: solid;
	/* trigger stacking context */
	transform: translate3d(0,0,0);
}
.below {
	height: 5em;
	position: absolute;
	z-index: -1;
}
	.below-child {
		position: absolute;
		width: 5em; height: 4em;
	}
.in-flow {
	margin: 1.7em 1em;
}
.zero {
	position: absolute;
	top: 5.2em; left: 3em;
	z-index: 0;
}
.auto {
	position: absolute;
	top: 7em; left: 4em;
}
.above {
	position: absolute;
	top: 9em; left: 5em;
	z-index: 1;
}
.fixed-box {
	position: fixed;
	width: 30%; height: 30%;
	top: 10%; left: 35%;
}

.checker-board {
	background-image: 
		linear-gradient(45deg, grey 25%, transparent 25%, transparent 75%, grey 75%, grey), 
		linear-gradient(45deg, grey 25%, transparent 25%, transparent 75%, grey 75%, grey);
	background-size:60px 60px;
	background-position:0 0, 30px 30px;
}
.green { background: hsla(120, 73%, 75%, 0.7); }
.blue { background: hsla(219, 79%, 66%, 0.7); }
.chocolate { background: hsla(25, 75%, 47%, 0.7); }
.brown { background: hsla(25, 100%, 34%, 0.7); }
.white { background: hsla(0, 0%, 100%, 0.7); } 
.aqua { background: hsla(180, 100%, 50%, 0.5); }
.violet { background: hsla(282, 100%, 41%, 0.5); }

dabblet.html

<div class="main checker-board">
	.main
	<div class="above aqua">
		.above
	</div>
	<div class="zero violet">
		.zero
	</div>
	<div class="below chocolate">
		.below
		<div class="below-child brown">
			.below-child
		</div>
	</div>
	<div class="in-flow green">.in-flow</div>
	<div class="auto blue">
		.auto
	</div>
</div>
<div class="fixed-box white">
	.fixed-box
</div>

dabblet.js

// alert('Hello world!');

settings.json

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