Containing Block

From CSS Discuss

Jump to: navigation, search

This is a quick overview of what a containing block is, how it's defined and what it's used for.

Positioning

Quick summary (see also Css Positioning )

  1. position:static is the default where the browser works out where stuff belongs.
  2. position:absolute allows an element to be positioned with respect to that element's containing block (which can be the entire page).
  3. position:relative allows an element to be positioned with respect to that element's position it would have had were it not moved relative to that position.
  4. position:fixed is unsupported by Internet Explorer v6. but allows an element to be positioned with respect to the browser window, irrespective of where the page is scrolled to. (See Fixed Position and Emulating Fixed Positoning)

See http://www.w3.org/TR/REC-CSS2/visuren.html for definitive details.

The containing block

Using CSS position:absolute means that elements can be positioned with complementary pairs of CSS left/top/bottom/right properties. The origin of the co-ordinate system that left/top/bottom/right refer to is initially the top-left of the page (browser viewport) or, almost equivalently, the body element.

This is good for fixed-width layouts where you know beforehand where everything should sit on the page. For flexible (liquid) layouts (and many other reasons) it's useful to be able to choose the co-ordinate system's origin. CSS lets us do this by positioning an element, like a <p> or <div>, and then any elements enclosed in that element take their co-ordinates relative to that element.

E.g.

<div style="position:relative;">
  <p style="position:absolute;top:10px;left:10px">10px!</p>
</div>

The <div> sets the co-ordinates as it has style position:relative but does not move from its initial position, so is otherwise unchanged. The <p> is contained by the <div> (as it's inside the opening and closing tags.) The <p>'s position:absolute takes its co-ordinates from the containing block, i.e. the <div> so no matter where the <div> ends up on the page, the <p> is 10 pixels from top and left-hand edge.

E.g.

<div style="position:absolute;right:0;">
  <p style="position:absolute;top:10px;left:10px">10px!</p>
</div>

Now the <div> has position:absolute so, unless told otherwise, starts off at the top-left corner of the viewport, but the rule right:0; positions its right-hand edge on the right-hand side of the viewport. The <p> still takes its co-ordinate origin from the the <div> so it again ends up 10px from the top/left corner of the <div>.

Issues

  1. position:absolute takes the element out of the document flow so elements around it ignore its size when they are positioned on the page.
Personal tools