ansaurus

Question

what is the containing block of an absolutely positioned element?

Answer 1

+2 A:

You are correct. The containing block is the last positioned element. so if you want to explicitly set the container then give it position:relative. Most browsers get this right. CSS doesn't really have a 'viewport', I think the top is the HTML element though don't hold me to that. IE prior to 7 had an unnamed element above HTML though.

SpliFF 2009-05-25 06:41:59

coz the spec says "If there is no such ancestor, the containing block is the initial containing block." and "the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media."

動靜能量 2009-05-25 06:53:41

it is a matter of scope. the browser finds the closest parent of your absolute position object and so your object is absolute positioned relatively to that specific parent.

vsync 2009-05-25 21:20:31

closest parent witch has position:relative of course. else, it just obeys the window viewport.

vsync 2009-05-25 21:21:40

Window viewport is for all intents and purposes the body tag in most (if not all) cases.

ajm 2009-05-26 18:50:37

Answer 2

+1 A:

Summary:

`position: relative`

Does nothing except set the positioning context for all the elements contained within it. You can then position: absolute any element it contains by setting (typically one or two) values from the possible top, right, bottom or left.

If you give an element with position: relative a top, right, bottom or left value, it will shift position accordingly but leave a blank space where it would be by default. In other words, it remains within the document flow but offset.

`position: absolute`

To position something absolutely, you need to ask 'absolutely, but relative to which containing element'? It will either be the entire body (the default) or some other element on the page that is already positioned (usually with relative or absolute - fixed is also useful and supported in IE 7 but see this bug). It is then taken out of the document flow - other elements might appear beneath it, but won't flow around it. If it appears behind another element, you need to set the z-index property to move it in front.

A common solution is to have a centred container (margin: 0 auto) with position: relative within which other items are placed with position: absolute.

Finally, I like this little interactive CSS positioning demo.

Dave Everitt 2009-06-16 12:31:21

ansaurus

tags:

views:

answers:

what is the containing block of an absolutely positioned element?

Summary:

`position: relative`

`position: absolute`

related questions