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;

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.

Answer 2

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

Answer 3

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.

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.