Previous Message
Next Message

absolute positioning

Sent by Luc on 30 July 2010 21:09


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
correct?  


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 :-)
 
-- 
Best regards,
 Luc
_________________________

http://www.dzinelabs.com

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.

  


______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
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/
Previous Message
Next Message

Message thread:

Possibly related: