Is there anything wrong with positioning all elements relatively?

Question

Often I find myself attaching a class to an element just to give it position: relative; so that I can position it's children using position: absolute;

Would there by anything wrong, or should I say, would anything break if I was to write:

* {
  position: relative;
}

or perhaps the below example, as these are usually the only elements I require the relative positioning on:

div, navbar, footer, section, aside, header, article {
  position: relative;
}

According to W3schools, all elements are position: static; by default which is positioned according to the normal flow of the page.

"HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page."

and according to the same source, relatively positioned elements also position according to the normal flow of the page unless overridden with CSS:

"The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow."

Apis

No...but why do you need to? – Brewage

You may hit problems if you wish to absolutely position and element within an element further up the tree. You would only ever be able to position relative to the next ancestor – Sophronia

There is nothing wrong with what you do, but then you need to give every single element a position according to it's relation to another element. I would recommend only using positions for an element when it is really needed. Like 3rror404 said, you might hit problems further up the tree. – Dayna

@Brewage Just so I don't have to attach a class to a parent element for the sole purpose of changing it's positioning. Just seems messy to me. – Apis

Why would you attach a class to add a single property? Just add the property when required. – Brewage

I see what you are both saying @3rror404 & CvR - however, if I wanted to position an element to a parent further up the tree or the body, I can't see why I wouldn't just move it to be a direct child of the element I wanted it positioned relatively too? – Apis

@Brewage Sorry, I don't understand what you are saying. I'm saying if I have a div (divA), and I want to position another div absolutely to this (divB), I would need to attach a class of .relative to divA, just so I could attach a class of .absolute to divB. I know it's only a one rule helper class and it means nothing performance wise, I was just asking out of curiosity as to why we don't just do * {position: relative;} to save us some time / make the code less class heavy. – Apis

Answer 1

Yes, it is. If you try to position one element absolute it is positioned relatively to the closest ancestor, which has a CSS position other than static.

If every element has position:relative, this would be the direct parent.

But you might want to position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body.

At some point you will have the situation where you are not in full control of the HTML. Then you will see, that it is counterproductive to set everything relative.

An example might be a phat layer menu. You have the layer inside a .menu class somewhere deep in the jungle of hierarchical ul li elements. This should be positioned relative to the .menu element's position. You might not want to change the DOM tree here.

Helban

Your answer makes sense, but I am just wondering, if I wanted to position an element to a grandparent or the body - wouldn't I just move this to be a direct descendant, if it's going to be absolutely positioned it won't be in the document flow so it's position in the HTML isn't important? – Apis

Changing your markup just to suit your overzealously-applied CSS defeats the entire purpose of separation between presentation and structure. There is a reason the initial value of position isn't relative. – Eluviation

@JonKyte At some point you will have the situation, wehere you are not in full control of the HTML. Then you will see, that it is of no use to set everything relative. – Helban

@Eluviation I'm asking from a more theoretical point of view, I've just never fully understood why i've never seen anyone do this, I wanted to know the downsides. – Apis

@HerrSerker That is exactly the kind of downfall I was looking for, thank you. – Apis

@JonKyte An example might be a phat layer menu. You have the layer inside a .menu class somewhere deep in the jungle of hierachichal ul li elements. This should be positioned relative to the .menu element's position. You might not want to change the DOM tree here. – Helban

Answer 2

If you apply position: relative to all elements in the page, you won't be able to use position: absolute efficiently, because you can't position an element to the grandparent and you will probably break in a unpredictable way external plugins/modules that rely on position: absolute.

You may encounter problems with z-index (for example in dropdowns menu), and you'll end up overwriting this behaviour with position: static and position: absolute.

Demy

Up voted for considering plugins - I hadn't thought about plugins, however, if they have position: absolute; it would have been done using CSS which would be a more powerful rule than * and therefore would overwrite the position: relative; set on all elements. – Apis

Actually, I think you may still have problems, because the plugin will assume a standard css environment (not polluted by the universal selector) and it may attempt to style a position: absolute element to a grandchildren of that element, and this, of course, will break the plugin. – Demy

Very true, I hadn't considered that, great insight, thanks for your input. – Apis

Answer 3

As for me using position:relative is not good - because sometimes you need to position elemet relatively browser window and it will give a problem to you. But if you are sure that you wont doing this Go ahead

Billiton

Answer 4

The first thing that jumps to mind and one that we saw in one of our sites recently was that any absolutely positioned elements within those relatively positioned elements will have their position offset from that element.

As an example that would be a problem if you were trying to position to the centre of the body.

Grouping

Answer 5

Setting position:relative to all elements is a bad idea. This can affect solutions built around z-index. As per html design positioned elements will display on top of unpositioned elements. If you set position for all elements some time unexpected elements participate in z-index calculation.

Mechellemechlin