Per Enrico

dabblet.css

/**
 * Per Enrico
 * header e footer con stack z-index corretto per l'annidamento misto
 * aggiungi a .b la classe "top"
 * per vedere come si sposta sopra ma resta sotto ad .a
 */

* {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

.cont {
	width: 100%;
	height: 4em;
	background-color: rgba(0,0,0,0.2);
	position: fixed;
}

.a {
	width: 20%;
	height: 100%;
	background-color: yellow;
	position: relative;
	z-index: 30;
}

.b {
	width: 78%;
	height: 4em;
	margin-top: -4em;
	padding-left: 22%;
	background-color: rgba(0,255,255,0.5);
	position: fixed;
	top: 100%;
	bottom: auto;
	z-index: 20;
}

.b.top {
	top: 4em;
}

dabblet.html

<div class="cont">
	<div class="a">.a</div>
	<div class="b">.b</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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