Weird behavior when combining opacity & z-index: -1

dabblet.css

/**
 * Weird behavior when combining opacity & z-index: -1
 */

div {
	position: relative;
	width: 200px; height: 200px;
	background: yellowgreen;
	
	/* Try commenting this or setting it to 1: */
	opacity: 1;
}

div > div {
	position:absolute; 
	z-index: -1;
	width: 200px; height: 200px;
	background: #d00;
}

dabblet.html

<div>
	<div></div>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}