It also should be pointed out that if the containing box contains no
position of its own, the absolute positioned box inside will take its
position from the initial containing box, or a box higher up the document
tree that contains positioning.

So, if you have div1 on the page with no positioning, and div2 inside with
absolute positioning, div2 will ignore div1 and position itself in
relationship to the initial containing block.

To stop this, you can simply set div1 with:
"position: relative" and no values set for top and left.

This will keep it in exactly the same position it currently is, as the
default values for top and left are 0 and 0.

A rough as guts demo is here:
http://www.maxdesign.com.au/jobs/absolute.htm

As you can see, the first red box is set outside its containing div, but the
following ones are inside their containing div - as they have some form of
positioning set.

What is a containing block and an initial containing box, I hear you ask?

The initial containing block is the entire width and height of your web page
- including parts of the page that are outside the viewpoint.
http://css.maxdesign.com.au/floatutorial/introduction30.htm

A containing block is a box or block that contains other elements
(descendant boxes). An elements containing block means "the containing block
in which the element lives".
http://css.maxdesign.com.au/floatutorial/introduction03.htm

Russ


> Hi Taco,
> 
> Lifted straight from Douglas Bowman's "Making the Absolute, Relative"
> http://www.stopdesign.com/also/articles/absolute/
> 
> <quote>
> an absolute-positioned element
> <http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme>  is positioned
> according to its containing block
> <http://www.w3.org/TR/CSS2/visuren.html#containing-block> "
> </quote>
> 
> <quote>
> If an absolute-positioned element resides within no other containing block,
> (when no ancestor elements are positioned) it is placed relative to the page
> boundaries (called the initial containing block)
> </quote>
> <http://www.stopdesign.com/also/articles/absolute/>
> hth,
> Ben

*****************************************************
The discussion list for http://webstandardsgroup.org/
***************************************************** 

Reply via email to