Position Property - Demo

dabblet.css

/* Position Property - Demo */

.box {
	height: 160px;
	width: 	400px;
	background: red;
	margin: 120px auto;
	padding: 50px 10px;
	text-align: center;
	
	position: relative;
}

.circle {
	height: 100px;
	width: 	100px;

	background: green;
	border-radius: 50%;
	top: -50px;
	
	left: 50%;
	margin-left: -50px;
	
	position: absolute;
}

img {
	vertical-align: middle;
}

figure {
	background: black;
	text-align: left;
	float: left;
}


/**
position
top, right, bottom, left, z-index

**/

dabblet.html

<div class="box">
	<div class="circle"></div>
	<h2>Merry Christmas!</h2>
	
	<figure><img src="http://placekitten.com/120/80"></figure>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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