Please help ... what difference the use of absolute and relative statement in a div?

Discussion in 'CSS' started by ngek, Apr 23, 2011.

  1. #1
    I do not understand about the use of css div position absolute and relative, please help difference between absolute and relative usage. :)
     
    ngek, Apr 23, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Most of the time, relative position is used to reset the boundary to the dimensions of a container.
    Elements inside the container with absolute position are offset from the container, not the page body or another container.

    This will stick a heading at the bottom right corner of a logo div:
    
    <html>
    <head>
    <style type="text/css">
    #logo { height: 300px; position: relative; width: 300px; }
    #logo h1 { bottom: 0; right: 0; position: absolute;  }
    </style>
    </head>
    <body>
    <div id="logo">
    	<h1>Heading</h1>
    </div>
    </body>
    </html>
    
    Code (markup):
     
    Cash Nebula, Apr 23, 2011 IP
  3. Zetiz

    Zetiz Active Member

    Messages:
    668
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    80
    #3
    These term have confused many people most of the time. Whenever you have more than one divisions which are placed one inside the another. Then you can actually position the inner divs by making them absolute positioning keeping the outer one as relative.

    Suppose you have an outer div and you make it relative. Then you can make the inner divs absolute and position them according to your needs. This situation arises mostly while making various sections like header, navigations, main content and footers in the websites.

    Hope you have got an idea by now. :)
     
    Zetiz, Apr 23, 2011 IP
  4. ngek

    ngek Member

    Messages:
    101
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    28
    #4
    Thanks all for your response :), I'll try again.

    Case like this: I have a wrapper div, content div and sidebar div, wrapper does not conform to the sidebar or content.
     
    ngek, Apr 23, 2011 IP
  5. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #5
    What do you mean "conform"?

    If you mean it does not enclose the content and sidebar, try adding overflow: hidden; to the wrapper CSS
     
    Cash Nebula, Apr 24, 2011 IP
  6. rajeev_seo

    rajeev_seo Peon

    Messages:
    211
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Most of the time, relative position is used to reset the boundary to the dimensions of a container.
    Elements inside the container with absolute position are offset from the container, not the page body or another container.
     
    rajeev_seo, Apr 24, 2011 IP
  7. ngek

    ngek Member

    Messages:
    101
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    28
    #7
    Yeah ... case has been resolved, thanks a lot, pleased to discuss with you guys :)
     
    ngek, Apr 25, 2011 IP