CSS Positionning #02
Absolute & relative
by roge roge
HTML
<div id="div-1">
DIV-1 (default = static)
</div>
<div id="div-3">
DIV-3: Absolute
<div id="div-3-1">
DIV-3-1: (default = static) normal flow
</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>
<div id="div-2">
<p>DIV-2: Relative to the natural positionning in the document: just after DIV-3</p>
<p>As DIV-2 is declared after DIV-3 it's above.</p>
<p>Notice: Width 100% + left 50px and the div overlaps the window boudaries (scrollbar).</p>
<div id='div-2-1'>
div-2-1
</div>
<div id='div-2-2'>
div-2-2
</div>
<div id='div-2-3'>
div-2-3: top:30px; left:200px;
</div>
</div>CSS
#div-1 {
background-color: #aaf;
width: 300px; height: 100px;
}
#div-2 {
position: relative;
top:0px; left:50px;
background-color: #faa;
}
#div-2-1 {
background-color: #A66;
}
#div-2-2 {
position: relative;
top:0px; left:150px;
background-color: #f33;
}
#div-2-3 {
position: absolute;
top:30px; left:350px;
background-color: #f33;
}
#div-3 {
position: absolute;
top:30px; left:200px;
width: 300px; height: 200px;
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:8px; left:200px;
background-color: #2f2;
opacity: 0.7;
}