SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Positioning Question while waiting on answer

    I'm still having problem understanding the relative and absolute positioning attributes. I have a book "Learn CSS in 24 Hours". Well it's been a lot longer than 24 hours and I'm still wrestling with the concept.
    In the book it keeps referring to a "context box":
    "The context box is determined by the value of the position property. If the value of the position is relative, the context box is the original position of the element. If the value of the position is absolute, the context box is the display box of the <body> tag."

    What is the context box? The div I'm working on? The browser window? What and where am I measuring from to know what amount to enter?

    Any insight would be great. This seems to be the most confusing part of CSS. When I read the above, I feel like it's a box within a box within a box within a box. Maybe it is maybe not. I don't know, my head is spinning trying to figure this out.

    Thanks,

    John

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi John,

    The context box is basically the parent of the element and a parent of a positioned element is defined in a special way as shown below.

    There is a short explanation in the FAQ thread of which i've duplicated below:

    Quote Originally Posted by faq
    FAQ:Absolute Positioning :

    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.
    Relative positioning is easier to understand as it relates only to itself and no other elements. It does not matter what parent it has or where it is and the positioning context is in fact itself. (as stated in your post).

    A relatively placed element is moved from where it is and then put somewhere else. So left 10px would mean move me from where i am by 10 px to the left.

    However the space that the relative object previously occupied is preserved and all other elements will react as if the elelement was still in its original position in the flow of the document.

    Hope that explains it a bit clearer.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •