I'm trying to get an idea of all of the effects of applying position: relative to an element (as opposed to leaving it with the default value static).

Obviously, the primary effect (laying out the element normally, but then potentially offsetting it via left, top, etc.) is explained clearly in the spec -- that part's fine.

But position: relative has more effects than simply offsetting the element, because it makes the element "positioned," which has at least these further consequences:

  • Positioned elements show up in a different place in the stacking order and can have z-index values

  • Positioned elements become offset parents for positioned elements within them

What other effects are there (if any)?

  • I have found this tutorial (http://www.barelyfitz.com/screencast/html-training/css/positioning/) very helpful, maybe it will help? Mottie about 7 years ago

1 answer

This was chosen as the best answer

you don't have to offset the element, and if you don't it then becomes handy as a container for absolutely positioned elements, which then take its boundaries as the reference.

it's worth noting that adding position:relative; to create a positioned element fixes certain IE bugs.

you should also note that the z-index of a parent will influence the z-index of a child, so if things aren't stacking as you expect, check what z-index the parent container has.

can't think of any others.

Answered about 7 years ago by Tony Crockford
  • Thanks. Yes, in fact I'm not planning to offset them, but making them relative mostly to control the z-index. Just worried about side-effects. :-) T.J. Crowder about 7 years ago
  • I've noticed recently that you need to explicitly declare the top and left to be zero for IE to manage - it may be associated with other css in this specific case, but worth knowing, just in case. Tony Crockford about 7 years ago
  • @T.J, there shouldn't be any side effect (I cannot be 100% certain for older browsers though). What you have described together with Tony's basically cover most of the 'effects'. o.k.w about 7 years ago