Simple, Stupid CSS Question

[Phil-man]

Hi. Is there any reason why I should NOT put something like the following at or near the beginning of my style sheets?

*
{
  position: relative;
}

Obviously, I may absolute-position some elements that come after in the style sheet, but I often find myself having to go back and add position: relative to various elements and thought I could save myself the trouble by doing the above. Might it cause any problems? Any downside?

Thanks!

[clairs]

The question is why would you want to?

[dresden_phoenix]

aside , from clairs' comment. YES there is. I try to refrain from positioning until I need it either to move something relatively, add a z-index or need to give absolute position to one of its descendants.

That last one is the main concern for what you are talking about. if you give absolute position to everything, any time you use AP, the element will be positioned off of its parent.

Suppose you had this code you want to position .dropMenu as a vertical menu, below another vertical menu...

<ul id="main_menu">
<li> Item</li>
<li> Item</li>
<li> Item</li>
<li> <ul class="sub">Item
<li> Item</li>
<li> Item</li>
<li> Item</li>
</ul></li>
</ul>

.sub position and size would be calculated based on the PARENT LI rather than THE UL, which is what would make crating this effect easiest. Sure, you could say : #mainMenu > LI {position: static;} to fix this.. but isn't that the same amount of work and causing more browser compatibility issues than just simply giving #mainMenu {position relative}?


you could, reserve a line on your code for relative elements

#mainMenu, .shellDiv, .someOther, .another{ position:relative;} if you think that would make your code cleaner and /or more organized.

[Phil-man]

Well, as I said, I often find myself having to go back and set some elements to position: relative. Reasons include being able to set a z-index, set elements within those elements to position: absolute, etc.

If there's no harm in setting everything to position: relative, it would make things easier down the road, that's all.

[Phil-man]

Thanks, dresden, my response was to clairs before your comment came through. :-)

[Paul O'B]

Using the universal selector is nearly always a bad idea unless you are targeting a specific section via a parent id or similar.

Applying a property to all elements is bad for performance and usually just bad full stop as in some cases will kill the normal inheritance rules. The only things you can really globally set are margins and padding and even then you cause problems with form elements.

If you apply position:relative to all elements then you can never escape from them in IE7 an under.

Internet Explorer for Windows versions up to and including 7 always use the nearest positioned ancestor to determine the stacking context for the element in question.

In IE6 position:relative also triggers a different rendering algorithm and if you apply too many position:relatives it can go berserk. Not to mention older safari which will hide all elements on the page containing position:relative if you have applied position:relative to the html element.

As usual, if you do things properly and only apply when needed then there is no problem.

Usually you know if a child is to be absolutely positioned so you would create the stacking context when you needed it right at the start. If you change the design at a later date then adding position:relative to the parent isn't such a hard task is it?

I'm all for short-cuts but applying a property to all elements unnecessarily just seems like a bad practice and something that will come back to bite you more times than it helps you.