SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question absolute position question

    hey folks, i m clearing my misconception abt absolute position. i had few question.
    what is the use of absolute and how does it differ from relative?
    i made some simple css but the div menu seems 5px; bigger to the right side. whereas i gave its width 100%. why is this happening?
    Code CSS:
    .header{width:100%; height:200px; background:#006295;}
    .body{width:100%; height:800px; background:#C5EFFD;position:relative;top:-10px;}
    .menu{width:100%; height:50px;background:#9BE1FB; position:absolute; top:170px;}
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="stylesheets/sandbox.css" rel="stylesheet" type="text/css" />
    </head>
     
    <body>
    <div class="header"></div>
    <div class="body"></div>
    <div class="menu"></div>
    </body>
    </html>
    All those who wander aren't lost.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    If you remove default paddings etc. all will fit together.

    Code:
    * {margin:0;padding:0;} /* for testing only */
    The natural space for a relatively positioned element is preserved even if the element is moved, while the natural space for an absolutely positioned element is lost (and the other elements don't see it any more).

    Don't use abs pos for layout like this.

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i was learning the difference b.w abs and rel position. so that came into my mind
    All those who wander aren't lost.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Absolute positionining removes elements from the flow. No other elements (not even other absolutes) recognize it is there.

    It's like a ninja. It can go anywhere.

    Relative positioning makes an element relative to itslef. If you try and move the element via top/bottom/right/left offset properties it will move the element visually but not physically.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well said Ryan!
    body {
    display: public-affection;
    }

  6. #6
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    lol ryan i like the way u explained. its like a ninja so abs isn't good. i guess coz if other element can't recognize its there. they can create problem.
    Off Topic:

    Hey ryan. been a long time. how u doing?
    All those who wander aren't lost.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes you are correct. For layouts you don't want AP. But r ather use floats instead .

    AP is fine for small design details or other small segments.

    Off Topic:

    Hello, are you ammark? I recognize your avatar.

    If not then I apologize. I see so many people on here lol
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    yes i m me
    All those who wander aren't lost.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    lol ryan i like the way u explained. its like a ninja so abs isn't good. i guess coz if other element can't recognize its there. they can create problem.
    Well, now, let's not be so down on ninjas. Sometimes a ninja is exactly what you need: we use absolute positioning often in certain techniques, such as Gilder-Levin image replacement (for example). Or, a CLOSE button on a lightbox div.

    The important thing to remember about position: relative (since you already now have the important thing about absolute) is that when you make a box (say, a div), it's position: static.

    When you say "position: relative" on that box, what you actually are doing is making another box. You don't see it. The specs call this a "generated box" and it has on it everything you could see on the old box: any borders, backgrounds, and children it had.

    The original box becomes invisible, and generally this doesn't matter if you don't add any coordinates because the new box is sitting precisely over the old box.

    When you start adding coordinates like top and left, then you may have a problem if you don't know what's happening: the old box doesn't move. It continues to take up space right where you created it.

    The box you see moving is the new box. So a common question some people have with relative positioning is, why do I have this extra unwanted space and how do I get rid of it?

    Another thing to be aware of is, because this new box is sitting "above" the old box (like a new sheet of paper sitting over another sheet of paper), it has a higher z-index naturally (so, even if you don't state "z-index", it is still sitting a bit higher than the other static boxes on the page). So when you're moving this new box around, it covers the other boxes.

    Absolutely positioned boxes also have a naturally higher z-index; this is even higher than the relatively positioned boxes. I think of abso-po'd boxes as like mattresses floating on the surface of the ocean while all the other boxes are on the ocean floor. They can't see the mattress, and the matress can't see them (other than its nearest positioned ancestor of course : )

    They do all have a place where they belong. None of them are evil or even Bad Things To Use. They're bad only because people start out using them right away, when the real goal is to keep elements acting naturally and in the flow as much as possible (unless you are doing a l33t ninja CSS trick : )

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Absolutely positioned boxes also have a naturally higher z-index; this is even higher than the relatively positioned boxes.
    No they don't.

    Absolutely positioned elements normally just appear on top because they appear later in the source order and since z-index:auto is default for all positioned elements, AP elements will appear on top.

    They don't have a naturally higher z-index . It's all "auto" (not including hte IE z-index bug where it makes the default value "0")
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    lol, way too much info for my little brain. though i like the depth of poes explaination. though it got me confused. which one is it. abs position have higher z-index or like ryan said its coz of it comes latter in code
    All those who wander aren't lost.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    All positioned elements come with a z-index:auto (lets forget about IE)

    That means that elements that come later in the source code will naturally stack on top because they come later in the HTML

    Stomme Poes was mistaken I'm afraid
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I may be. Now I have to go make a test! (because what if they aren't later in the source?)

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Say you have element1. That element1 is RP.
    Element2 is AP

    If the HTML is
    <element1 />
    <element2 />

    Element2 w ill be on top (assuming it's positioned that way)

    Say the HTML is switched up
    <element2 />
    <element1 />

    Element1 will be on top since it's later in the HTML.

    RUn all the tests you want Stomme .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    RUn all the tests you want Stomme
    And so I did, though not til now because I just got to work : )

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="content-language" content="en">
        <title>AP</title>
        <meta name="description" content="AP vs RP">
        <style type="text/css">
    
    body {
      padding: 0 15px 15px;
      background-color: #fc0;
    }
    
    p {
      margin-left: 30px;
    }
    
    #ap {
      position: absolute;
      left: 50px;
      top: 40px;
      width: 400px;
      height: 400px;
      background-color: #0f0;
    }
    
    #rp {
      position: relative;
      top: 10px;
      width: 400px;
      height: 200px;
      background-color: #f00;
    }
    
        </style>
      </head>
    <body>
      <p>Static body</p>
      <div id="ap">Abso-po'd</div>
      <div id="rp">Rel-po'd</div>
    </body>
    </html>
    The point being, not to prove you wrong, but to see it for myself : )

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That's fine . I don't think your so out to get me that you'd purposefully run tests for that .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Lawlz! It's a conspiracy! :3

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Yes Ryan was correct

    Visual formatting Model.
    Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.
    More reading


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
  •