16

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?

bbuser
  • 918
  • 11
  • 33
  • 1
    @suresh Read this question then read the one you linked to. They aren't duplicates... – jeremy Jul 07 '14 at 08:01
  • @bbuser: that's the difference (acting as container for relatively positioned child elements) – knittl Jul 07 '14 at 08:03
  • 1
    The only difference between static and relative seems to be that left, right, top and bottom do not apply to static elements - https://developer.mozilla.org/en-US/docs/Web/CSS/position – Pete Jul 07 '14 at 08:13
  • @knittl Yes, but is it the only one? – bbuser Jul 09 '14 at 10:37
  • @knittl wait what..? "acting as container for *relatively* positioned child elements" ?? – T J Jul 12 '14 at 18:33
  • @TilwinJoy: wooops. That was meant to read "absolutely positioned" child elements. `top` and other css properties are relative to the first parent element with `position:relative`, or `body` if there is none (or only `position:static`) – knittl Jul 12 '14 at 19:08

7 Answers7

12

  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.

Matija Mrkaic
  • 1,817
  • 21
  • 29
  • Got a source for point #3? Or is that just idle conjecture based on your experience developing for IE7? – BoltClock Jul 09 '14 at 16:50
  • Point #3 is based on my experience. I don't have documentation source for it, but there are previous mentions of it. Answer is updated to include them. – Matija Mrkaic Jul 09 '14 at 20:11
  • I will like to add `Static` Element automatically Comes with `z-Index` which makes it above relative element.. that's why we can not add z-index to that element; Example: [`fiddle`](http://jsfiddle.net/MarmeeK/Tr2Yz/) – MarmiK Jul 14 '14 at 08:12
  • @MarmiK Your fiddle proves nothing. On the other note, `relative` element will be above `static`, if they are siblings without `z-index`. – Matija Mrkaic Jul 14 '14 at 11:22
  • @MatijaMrkaic I liked your answer and Upvoted it, I will not like to argument on the results as each browser has something for a change.. check this http://jsfiddle.net/MarmeeK/Tr2Yz/2/ it is not giving me overlap of sibling 'sib1' with 'wrapper and 'sib2' with 'mother' are not overlapping.... Adding words that makes some sense as per the question. For more debate we can refer [Old Post](http://stackoverflow.com/questions/5011211/difference-between-static-and-relative-positioning) :) – MarmiK Jul 14 '14 at 12:15
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.

Danield
  • 121,619
  • 37
  • 226
  • 255
  • 2
    I don't see how the edit is relevant to the question. You are comparing a top margin on a non-positioned element with a top offset on a relatively-positioned element - of course the behavior will be different since they are two completely different things. A better comparison that would actually address the question would be to compare top margins on both elements - but as you will see, [there is no difference](http://jsfiddle.net/BoltClock/bVneZ/8). – BoltClock Jul 09 '14 at 16:42
  • 1
    I wanted to point out an unintuitive usage of a relatively positioned element. Although the OP already knows that a relatively positioned element can be offset with the top,left.. properties, my gut feeling was that he may not have known about the rule which I quoted in my edit. – Danield Jul 10 '14 at 10:28
  • @BoltClock - In the bounty text it seems clear that the OP is looking for additional use cases for `position:relative`. That being so, with my edit I'm trying to show that `position:relative` has and 'edge' over static elments with regards to positioning as in addition to supporting margin - it also supports top,left etc which works differently. – Danield Jul 16 '14 at 09:33
2

you can omit

left: 0;
top: 0;

because they are defaults of position:relative and no, there's no real differences except you don't need to change it to relative if you don't need to use top,left or z-index values and if you don't need to have absolutely positioned divs inside it

also remember relatively positioned elements occupy their static position in the document flow

valerio0999
  • 11,458
  • 7
  • 28
  • 56
  • 2
    The initial value of the offsets is `auto`, which may not always resolve to zero. – BoltClock Jul 09 '14 at 10:36
  • @BoltClock can you provide an example where top:auto != top:0? – valerio0999 Jul 09 '14 at 10:38
  • 1
    I should have been more clear - the initial value is `auto`, which will only resolve to zero on one side if the opposite side is also zero. If all the sides are left unchanged, i.e. all `auto`, then they will all be zero, but there is also the possibility of any of those offsets being nonzero which will affect the opposite value. But as long as you're not setting any of the values elsewhere, it should be fine. – BoltClock Jul 09 '14 at 10:40
2

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).

Oleg
  • 24,465
  • 8
  • 61
  • 91
1

difference between position : (Demo)

enter image description here

position : static does not accept left & top. static use to overwrite position relative or absolute for some scenario. as you can see in pic.

position : relative accept left & top but relative to its normal position. if there is no previous element than its take form parent element as you can see in pic.

position : absolute accept left & top but relative to parent(if position: relative define to parent element) as you can see in pic.

So Question : "Is there a difference between a block with relative & static?" Ans : Yes :)

&

Is there a difference between a block with

position: static;

and

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

Ans : No

Amit
  • 1,841
  • 1
  • 19
  • 36
  • 2
    The Difference is static Default value. Elements render in order, as they appear in the document flow relative The element is positioned relative to its normal position – user3218194 Jul 15 '14 at 06:14
1

There are two very big differences between Static and Relative positioning. Most of which is most identifiable by the name of the components. As you would imagine, a Static positioned component will be static! You will be unable to control the position of the component that is making use of Static, with top, left, bottom and right, rather it is positioned by being placed under the last component.

Relative, on the other hand, is a much better solution and much it is much more useful. You can, unlike Static positioning, position is using top, left, right and bottom, but it is still placed underneath the last component.

In addition, you are unable to control the Z-Index of a Staticly positioned component. However, this is not the case with a Relatively positioned component. Using Z-Index on a Staticly positioned component will have no affect at all, and will just place the component beneath the components that are called before it.

Static positioning is a lot like Relative positioning, without all of the control. If you just want to place several components, one after each other, without worries of how they will be positioned. Like so: http://jsfiddle.net/u62GV/ Then use Static. But if you would like to have several components placed one after each other, with the capability of positioning the components (similar to absolute)I would recommend Relative, as can be seen in the following example: http://jsfiddle.net/AhLF5/.

Maybe these links can help you:

Difference between static and relative positioning

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

http://www.codecademy.com/forum_questions/513b0a64ee849413590009f9

Community
  • 1
  • 1
NebulaeGuy
  • 169
  • 9
-3

1. Static

position: static;

2. Relative

position: relative;

3. Absolute

position: absolute;

The difference is:

1 - The position is based on browser viewport, it means that doesn't matter if you scroll infinitely to any direction, because base values still are viewport.

2 - The position is based on parent viewport, so if you scroll to any direction, probably the element will go away (except if parent are static :D)

3 - The position is based on a closest positioned parent viewport, any element with a position (static/relative/absolute) defined.

I hope this don't make you more confused.

lmao

Artur Luiz Oliveira
  • 107
  • 5