---- for demo ---

dabblet.css

.box {
  position: relative; 
  margin-left: 0;
  margin-right: 0;
  width: 300px;
  height: 300px;
  background-color: skyblue;
}

.obj {
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
  font-weight: bold;
  color: #FFF
}

.obj-a {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  background-color: indianred;
}

.obj-b {
  position: absolute;
  top: 44px;
  right: 44px;
  z-index: 10;
  background-color: green;
}

.obj-c {
  position: absolute;
  top: 88px;
  right: 88px;
  z-index: 1;
  background-color: purple;
}





/* ---- for demo --- */
* {
  margin-top: 0;
  margin-bottom: 0;
}

body {
  padding: 50px;
}

li {
  margin-left: 1em;
}

dabblet.html

<div class="box">
  <div class="obj obj-a">A</div>
  <div class="obj obj-b">B</div>
  <div class="obj obj-c">C</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"140","seethrough":"","prefixfree":"1","page":"css"}