Demonstating negative margin behavior on absolutely positioned elements.

dabblet.css

/*
 * Demonstating negative margin behavior on absolutely positioned elements.
 *
 * Conclusion: Browser only changes position when the margin is set on the same side as the position offset.
 * E.g. style rule has margin-top and top set, or margin-bottom and bottom.  See A & C.
 */
div {
	position: absolute;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background: #eee;

}

#a {
	top: 100px;
	left: 0;
	margin-top: -100px; /* Brings it up 100px */
}

#b {
	top: 100px;
	left: 100px;
	margin-bottom: -100px; /* No change in position */
}

#c {
	bottom: 100px;
	left: 200px;
	margin-bottom: -100px; /* Brings it down 100px */
}

#d {
	bottom: 100px;
	left: 300px;
	margin-top: -100px; /* No change in position */
}
	

dabblet.html

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>

dabblet.js

// alert('Hello world!');

settings.json

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