Question

In CSS, an absolutely positioned element is positioned in relation to what?

#css

Answer

The CSS spec says that absolute elements are positioned with respect to the box's *containing block* [1]. For an absolute element, the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'. If there is no such ancestor, the containing block is the initial containing block. [2]

In other words, an absolutely positioned element is positioned in relation to its nearest positioned [3] ancestor. If the element has no positioned ancestors, it will be positioned in relation to the initial containing block. Depending on the user agent, this will either be the canvas or the HTML element. [4]

[1] http://www.w3.org/TR/CSS2/visuren.html#choose-position
[2] CSS 2.1 Specification's definition of "containing block"
[3] In CSS, what is a "positioned element"?
[4] p. 59 of Andy Budd's "CSS Mastery"

Learn

Author

xavi

Reviews
Last
next

Students 0