It’s All Relative Baby
Now we’re starting to get into the heart and soul of CSS, which would be positioning, or how a box relates to the rest of the page and elements. Over the next three tutorials I’m going to be talking about the different position types, but this one is going to be about relative positioning. This kind of positioning follows the normal flow rules, the only difference is that the box can be moved according to its offset properites.
Take a look at the boxes above and below the relative box. They still follow the nromal flow just as if the relative box was still there, even the vertical margins collapse. The difference is that the relative box can be moved around and even overlap the other boxes. Here’s an example of what the code will look like:
<style type="text/css">
.block-1 {
width:232px;
margin:20px;
padding:20px;
border:2px solid #000;
}
.block-2 {
width:232px;
margin:20px;
padding:20px;
border:2px solid #000;
}
.relative {
top:50px;
left:25px;
position:relative;
width:232px;
margin:20px;
padding:20px;
border:2px solid #000;
}
</style>
<div class="block-1"></div>
<div class="relative"></div>
<div class="block-2"></div>
The .relative block box is the one that is positioned relative to the normal flow, but that should be pretty obvious. You need to specify position:relative for this feature to work, and you also need to add an offset property. In this case it’s top and left, which means 50px from the top and 25px from the left. You can also use negative values here, or even the directional opposites bottom and right.
