Chrome behaves as expected: A “position:absolute” element’s “top”, “bottom”, “left”, and “right” styles are relative to the immediate parent/enclosing element. Firefox does not behave as expected: A “position:absolute” element’s “top”, “bottom”, “left”, and “right” styles are NOT necessarily relative to the immediate parent/enclosing element. Instead, Firefox goes up the chain of parent elements and sets the positioning relative to the first element that has “display:block” style.

My solution was to add “display:block” style to the “position:absolute” element’s immediate parent/enclosing element. I was using Chrome v.27 and Firefox v.21 in this scenario.

 

Advertisements