The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
#placement {
	width: 150px;
	height: 150px;
	margin: 200px auto;
	background-color: #ccc;
	position: relative;
}

#placement > div {
	background-color: orange;
	position: absolute;
	width: 20px;
	height: 20px;
	cursor: pointer;
	}

#placement > div:hover {
	background-color: red;
}


#placement > div.corner {
	width: 40px;
	height: 40px;
}
	
	
#placement > div.top { top: 0; }
#placement > div.right { right: 0; }
#placement > div.bottom { bottom: 0; }
#placement > div.left { left: 0; }

#placement > div.top.center,
#placement > div.bottom.center {
	left: 50%;
	margin-left: -30px;
	width: 60px;
}

#placement > div.left.center,
#placement > div.right.center {
	top: 50%;
	margin-top: -30px;
	height: 60px;
}

dabblet.html

<div id="placement">
	<div class="top left corner"></div>
	<div class="top center"></div>
	<div class="top right corner"></div>
	<div class="right center"></div>
	<div class="bottom right corner"></div>
	<div class="bottom center"></div>
	<div class="bottom left corner"></div>
	<div class="left center"></div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"1","prefixfree":"1","page":"all"}