Good afternoon Angela,
It was foretold that
on 30/07/2010 @ 12:25:52 GMT-0700 (which was 16:25:52 where I live)
Angela French would write:
<snipped a bit>
> I'm being driving nuts by absolute positioning rendering between IE
> and FF. I just want to confirm what I think is correct about
> absolute positioning. My understanding is that an absolutely
> position element positions itself relative to its parent container.
> If the parent has not positioning, then it positions itself
> absolutely relative to the grandparent container, and so forth, up to the <body>. Is this
An absolutely positioned element is removed from the normal flow of
the document and placed precisely at the co-ordinates specified by
top,left, right or bottom.
But what is the element absolutely positioned from? It is positioned
absolutely from the top left hand corner of its containing block (i.e.
its parent). The containing block of the positioned element is the
nearest ancestor element which has a value for the property position
other than static. If there is no ancestor then the containing block
is the root element , which is the html element outside of all margins
set on the body.
So what this boils down to is that an element will be absolutely
positioned from the top left of the viewport unless it is nested in
another element that has a value for the property position other than
static. e.g. position:relative or position:absolute. In these cases
the element will position itself the specified amount from the top
left of its parent elements.
So the usual way to place an element in relation to its parent is to
give the parent a position:relative without co-ordinates which keeps
the parent in the flow of the document. The nested child element will
then takes its absolute positioning co-ordinates using the parents top
left co-ordinates as its starting point.
If i'm mistaken, i'm sure somebody here will correct me :-)
Using the best e-mail client: The Bat! version 4.2.6 with
Windows XP (build 2600), version
5.1 Service Pack 3 and
using the best browser: Opera.
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/