pjkix · May 6, 2013 21:20
diff --git a/dabblet.css b/dabblet.css
 /**
 * Testing z-index in IE9 using IE7 compat mode
 */

 .wrapper {    position: relative;    z-index: 1;    width: 200px;    height: 100px;}
 .container {    position:relative;    z-index: auto;    width: 200px;    height: 100px;    border: 1px solid blue;    background-color: blue;}
 .controls {    position: absolute;    top: 0;    right: 0;    z-index: 5;    background-color: red;    border: 1px solid red;}
 .overlay {    position: absolute;    z-index: auto;    top: 0;    left: 0;    right: 0;    bottom: 0;    opacity: 0.5;    background-color: yellow;    border: 1px solid green;}
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->

 <div class="wrapper">    <div class="container">        <div class="controls">control</div>        container    </div>    <div class="overlay">overlay</div></div>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}
	/**
	* Testing z-index in IE9 using IE7 compat mode
	*/

	.wrapper { position: relative; z-index: 1; width: 200px; height: 100px;}
	.container { position:relative; z-index: auto; width: 200px; height: 100px; border: 1px solid blue; background-color: blue;}
	.controls { position: absolute; top: 0; right: 0; z-index: 5; background-color: red; border: 1px solid red;}
	.overlay { position: absolute; z-index: auto; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.5; background-color: yellow; border: 1px solid green;}
	<!-- content to be placed inside <body>…</body> -->

	<div class="wrapper"> <div class="container"> <div class="controls">control</div> container </div> <div class="overlay">overlay</div></div>