SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quesiton on relative positioning in context..

    Ok so if you are positioning elements in a example div they should take on the positioning according to the example div right?

    But why do some ppl use relative positoning to create a position of context for any of the elements in the example div?

    I don't get it. If the elements are in the div aren't they positioned to the div?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They are. What you're seeing is an optical illusion, since the element only "appears" to have been moved, even though it's really in the same place as it was before it was "moved" even though it really wasn't moved at all.

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still don't get it for instance look at this code why use relative wouldn't all the elements in the branding div just line up if you use regular padding and margins?

    Code:
    style type="text/css">
    div#branding { position : relative;
    width : 85%;
    height : 165px;
    background : url(../images/branding.jpg) no-repeat; }
    
    /* =h1 */
    div#branding h1 { z-index : 3;
    position : absolute; left : -50px;
    top : 0;
    width: 379px;
    height : 178px;
    padding : 0;
    margin : 0;
    background : url(../images/branding_h1.gif) no-repeat; }
    
    div#branding h1 a { display : block;
    width: 379px;
    height : 178px;
    text-indent : -9999px; }
    
    /* =blockquote */
    div#branding blockquote { z-index : 2;
    position : absolute;
    left : 335px;
    top : 40px;
    width: 199px;
    height : 103px;
    padding : 0;
    margin : 0;
    background : url(../images/branding_blockquote.gif) no-repeat;
    text-indent : -9999px; }
    
    /* =p */
    div#branding p { z-index : 1;
    position : absolute;
    right : 0;
    top : -50px;
    width: 340px;
    height : 291px;
    margin : 0;
    padding : 0;
    background : url(../images/branding_p.jpg) no-repeat;
    text-indent : -9999px; }
    
    </style>

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, in this case you're using relative positioning to set up a "relative stacking order" - in other words, you're saying "THIS is the container, and everything inside it that will be positioned absolutely will be done so relative to THIS, not the browser window."

    And yes, margins (including negative margins) and padding would be better for this type of effect. If you still need the z-axis stacking (stacking elements on top of each other), then use relative positioning to set the stacking order and then z-index to position it above or below what you need it to.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Ok so if you are positioning elements in a example div they should take on the positioning according to the example div right?
    No, elements are positioned in relation to the nearest ancestor that has a "value" for the property "position" defined other than "static". If none exists then the element is positioned in relation to the viewport (root element- html).

    Elements are not positioned from the element they are contained within unless that element is positioned also. (By positioned we mean absolute or relative (fixed elements are placed relative to the viewport at all times irrespective of which element they are placed in.)) If the current element is not positioned then the ancestor of that element is taken into consideration and if no ancestor has a position defined then we get back to the initial viewport as the

    As Dan already explained quite well you would need create a containing block for further positioned elements by adding position:relative to the parent (or position:absolute but that would change the flow of the document) and then further positioned elements are placed in respect of that element.

    Only positioned elements can take a z-index so position:relative is commonly added to static containers (without co-ordinates) for just this purpose as it does not change the flow of the document at all but creates a local stacking context.

  6. #6
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it thanks!

    One last thing I hear ppl say use absolute positioning for layouts and others say no use floats is there a right or wrong?

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolute positioning is best used on advanced techniques that compliment a layout rather than the layout itself since when AP (absolute positioning) is used for the layout, it can literally cause elements to overlap when the text is resized, the browser viewport is too large/small to handle the layout, etc..., whereas floats don't have that problem.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    there a right or wrong?
    It all depends on what you are doing exactly but what Dan says above is true.

    If you have a 3 column layout that is absolutely positioned then it is impossible to put a footer under the three columns. The word "impossible" is 100&#37; accurate in this situation.

    If you are never going to need a footer or anything else under the columns then you can get away with absolute positioning but you will have limited your options forever.

    Absolute elements are removed from the flow and are like islands unto themselves. They are useful for placing things in a certain position but take no care of what else may be in the way.


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
  •