Floated and Relativity Positioned an Element

Hi,

I have been practicing and trying to learn css for a few months now and questions arrive every time I start using it, here is one.
Why would you position a floated element as relative? In other words, I have seen some layouts that use float and position properties, something like …

.post-box {
background:#FFF7EF none repeat scroll 0 0;
border:7px solid #FEE8D1;
float:left;
margin:0 21px 21px 0;
min-height:270px;
padding:15px 15px 30px;
position:relative;
width:230px;
}

When would you use something like this?

As I said I’m still learning, sorry if this is something I should already know.
Thanks

position:relative; positions an element in ‘relation’ to where it should normally fall.

So if you float something left, but actually want it to appear 5px to the right of where it lays you would use position relative.

Another use is if you want to absolutely position another element inside the floated element. In order for it to be absolutely positioned inside the floated element rather than in relation to the entire page you need to have a relatively (or absolutely) positioned parent.

Thanks a lot for your reply!

A relatively positioned element is moved from its original position in the flow of the document and drawn at the new position that was defined (either top, bottom,right or left but) will not cause the page to reflow or react in any different way to had it not been moved at all.

A lot of people abuse position:relative because they don’t understand how it works and think that they can position elements in the same way that you could use a margin to move something.

When you move an element with position:relative you actually don’t move it all. The element appears to be at the new position that you have set but it still physically occupies its original position no matter how far you move it. It is only moved visually.

The space that a relatively positioned element originally occupied is always preserved.

Therefore if you were to move the element by left:100px then it would look like it was in a new position but all elements on the page think that it hasn’t moved at all and will only react to the elements original position. This means that in its new position the element will overlap or be overlapped by other content on the page because they don’t think it’s there.

Obviously you can’t use this type of positioning for structural elements in the flow unless you are using subtle overlapping effects. 99% of the time you should simply use margins.

Therefore most of the time I see authors move something with relative positioning they are doing it wrong and don’t understand the consequences.

Another use of position:relative is to create a stacking index so that absolute children can be placed within and use this parent as their starting point. (Absolute elements are placed in respect of the nearest positioned ancestor and if none exists then the viewport is used.)

Finally only positioned elements can hold a z-index so if you want an element to be on top of some other element you will need to add position:relative to it (no co-ordinates needed) and then you can set a z-index to stack the element where you want (although stacking contexts may finally be controlled by the ultimate parent of each element if the parent is positioned also).

There are two places where you’ll see position: relative where it seems it isn’t needed. So far as I can tell, this has to do with resetting the stacking context for children of the float (I may be wrong as to the reason for it though).

When doing Holy Grail layouts, where you have a 100%-wide float followed by another float whom you want to make sit right on the first 100%-wide float by using negative margins, you might notice some browsers having trouble with stuff like links sitting in that negative-margined second float. Setting position: relative on that float will allow Safari and whoever else it was actually click on links etc that are sitting in that second float.

I’ve also seen a similar issue in sticky footers who have been pulled up over the bottom of the 100%-high container with a negative top margin. I’ve found if I set position: relative, links in this footer are clickable, and inline elements don’t fall out.

Again, I’m assuming this is because the setting of position as reset the stacking context, even though normally someone who comes later in the code should already be “higher” than someone who comes earlier in the code.

Wow! very nice explanations, Paul O’B you made me understand it in a nice and easy way.

Thank you all for your help.