CSS Positionning #01

Absolute & relative

by roge roge

HTML

<div id="div-1">
	DIV-1 (default = static)
</div>
<div id="div-2">
	DIV-2: Relative to the natural positionning in the document
</div>
<div id="div-3">
	DIV-3: Absolute
	<div id="div-3-1">
		DIV-3-1: (default = static)
	</div>
	<div id="div-3-2">
		DIV-3-2: Relative to the natural positionning in DIV-3
	</div>
	<div id="div-3-3">
		DIV-3-3: Absolute to natural positionning in DIV-3
	</div>
</div>

CSS

#div-1 {
	background-color: #aaf;
	width: 300px; height: 60px;
}
#div-2 {
	position: relative;
	top:0px; left:20px;
	background-color: #faa;
}
#div-3 {
	position: absolute;
	top:20px; left:200px;
	width: 200px; height: 100px;
	background-color: #afa;
}
#div-3-1 {
	background-color: #9b9;
}
#div-3-2 {
	position: relative;
	top:4px; left:40px;
	background-color: #6A6;
}
#div-3-3 {
	position: absolute;
	top:4px; left:60px;
	background-color: #2f2;
}