Is there a difference between a static element and a relative element with left and top set to zero?

Question

A block element with position: relative; is often used as containing element for absolutely positioned elements. When I don't have such a block element I usually change a static one into a relative one. Does this change anything else except the element being able to act as container for absolutely positioned elements?

Is there a difference between a block with

position: static;

and

position: relative;
left: 0;
top: 0;

except the one mentioned above?

Answer 1

1. Relative element can make use of z-index while static can't.

2. Top,right,bottom,left have no effect on static positioned element.

3. IE7 needs relative position for the element to make use of overflow. Past stack-overflow question regarding this issue. Also, post from Jonathan Snook about it.

Answer 2

One difference that I can think of is that

an element with position:relative will respect the z-index property.

Demo

Edit:

As already mentioned, the offset properties top,left,bottom,right only apply to positioned elements (and not static ones)

Here is one (unintuitive) application of using this offset in relatively positioned elements - which also may influence you when deciding to set position:relative on an element.

Note: this will not be expressed when offset is 0 (ie top:0;left:0) as mentioned in the question, but is an important thing to realise when using position:relative.

From the spec:

Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied. This implies that relative positioning may cause boxes to overlap.

Take a look at this demo

You can see that when I placed a margin on the static element - it effected the following p element, however when I used positioning on the relative element - the following p element stays put.

Answer 3

Positioned elements with calculated z-indices other than "auto" generate stacking contexts (w3 spec). A less clinical definition of stacking contexts' behaviour is available on MDN.

The elements themselves appear in a different painting order (compare #3 with others).