Templatix Blog

Sometimes, as in the case of the graphically rich yet still editable buttons, you may need to use elements positioned ABSOLUTE in a context positioned RELATIVE.
We’re talking about the “position” CSS property, that can take one of 4 possible values: absolute / relative / fixed / static. I’ll leave aside fixed and static for now, and I’ll focus instead on those that interest us here: relative si absolute.

In this image I’m using as an example, the blue border represents the parent element (the context), the red border is an element positioned absolute, and the green border represents an element positioned relative. The red and green elements are included, code-wise, in the blue one, obiously.

Relative – using the position: relative; CSS property, we instruct the browser to position the element relative to its context, in a fluid mode. In other words, we force the relative element to depend, position-wise, on it’s parent, but also on the in-line flow of the other elements present in the same context. Put bluntly, we force the element to behave like a letter in a block of text.
Absolute - using the position: absolute; CSS property, we instruct the browser to position the element relative to its context, but independent of the in-line flow of the other elements in the context. In other words, we force the element to maintain fixed position coordinates, expressed in pixels or directions.

At least in theory.

Because, when you try to do this in real life, you notice that IE and FF go bananas when using position:absolute, every browser interpreting in its own way what element to report the positioning to. And the resulting effect will look completely different in different browsers.

Why is that? Because browsers decide differently on wheather the next relative parent is either the next logical parent or the BODY.

Sounds absurd, I know, but all makes sense in the end, you’ll see. When they need to position an element = ABSOLUTE, all browsers start looking up, ierarchically, looking for the next HTML element defined specifically as RELATIVE. Some consider this to be the parent, some consider the body. Hence the difference in visual results.

The solution? very simple: (Even if it sounds redundant,) when you tant to position X absolute in Y, then specifically define Y as having a position: relative;.

This will force ANY browser to explicitely understand what tag to report to (remember? the next ierarchically superior element that is explicitely set as relative), and to visually solve the problem in the same way.