In many ways this is easier than relative positioning. Absolute positioning puts the element in position based on the position of its parent. This will not work if the parent is position:static (so set it to relative or absolute).
Normally if you have a DIV inside a DIV you get this:
By positioning absolutely you can move the internal DIV anywhere in (or even beyond) the outer one. Try adding these styles to positioning.html:
#container {
position:relative;
height:100px;
width:300px;
background-color:green;
padding:0px;
margin:0px;
border:0px;
}
#contained {
position:absolute;
top:10px;
left:50px;
height:80px;
width:200px;
background-color:blue;
padding:0px;
margin:0px;
border:0px;
}
and this in the BODY:
<div id="container">
<div id="contained">
</div>
</div>
The first DIV needs to be positioned relatively even though no TOP and LEFT are set. Without this the absolute positioning would not have the effect we want. Try the above and then try changing the container DIV to static.
The second DIV is styled into position within the first one but down a bit and across a bit more.
Try changing the values for TOP and LEFT. Include negative (-10px;) values. Try using RIGHT and BOTTOM instead of LEFT and TOP.
Padding, margin and borders have been set to 0px in all these examples to avoid an confusion. Try increasing those in combination with positioning of various types. Grasp absolute and relative positioning and you can make money.
