1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Positining - Absolute and relative Confusion

Discussion in 'CSS' started by nicki123, Jan 16, 2010.

  1. #1
    Hi,
    SEMrush
    I am expert in table base website but since many day, i start to work on CSS, i read many tutorial related positioning but still i have confusion n both value Absolute and relative, if anybody can understand by example let me know
     
    nicki123, Jan 16, 2010 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,513
    Likes Received:
    1,930
    Best Answers:
    247
    Trophy Points:
    515
    #2
    Absolute positioning removes an element from flow - so basically it doesn't exist for determining the positioning of other things on the page. Then, when you set 'top','left','right' or 'bottom' it treats the corners as that of 'body', or of the nearest parent element that has positioning (relative or absolute) on it.

    One of the best examples of this is doing gilder-levin style image replacement

    <h1>Some Text<span></span></h1>

    
    h1 {
    	position:relative; /* absolutes inside this treat 0:0 as off the h1 */
    	padding:4px 8px;
    	font:bold 20px/24px arial,helvetica,sans-serif;
    }
    
    h1 span {
    	position:absolute;
    	top:0;
    	left:0;
    	width:512px;
    	height:32px; /* 4px padding + 24px line-height */
    	background:url(images/h1Logo.png) 0 0 no-repeat;
    }
    
    Code (markup):
    The span is moved to the upper left corner of the h1, and is rendered OVER the text.

    Because absolute positioning removes items from flow, it should be restricted in use to positioning fixed sized elements inside an element that is in flow - with the possible exception of things like menus (which technically are based off a flow element, the one you hover to make it appear).

    It should NOT be used for making things like columns since that is quite often prone to breakage. People who learned to draw goofy pictures in photoshop first often have difficulty grasping the idea of 'flow elements' much less having dynamic fonts and containers - and so they try to use absolute positioning for EVERYTHING then come here going "Why is my page broken in ____" - when the answer is "You used absolute positioning on EVERYTHING, it's a miracle you have scrollbars!"

    Position:relative is much more complex and completely misunderstood by most. The first thing it does we use in the above example, it makes it so absolute positioned elements inside it treat 0:0 in each corner as based on the relative tag and not BODY.

    The second thing it does is if you set top/left/right/bottom, it moves where the element is DRAWN but NOT where it is handled for flow. Other tags around it will pretend that it's still in it's original position. Because of this and other behaviors I like to think of the box-model actually being built from two boxes... Flow and Render. The 'flow box' is where the element exists in document flow - how other tags treat it for size and position - while the 'render box' is where the element is actually drawn. If you look at it this way certain things like negative margins start to make sense, since they actually change the size of the flow box without changing the size it's going to be drawn. Relative positioning moves the render box without effecting the flow box - etc, etc...

    It's a bit more complex on the surface than tables, but in practice it's simpler and a hell of a lot less code; and even when it is more code that excess lands in the CSS, so at least if you use the same elements across pages you exploit caching to use less bandwidth.
     
    deathshadow, Jan 16, 2010 IP
  3. adsensenewb

    adsensenewb Peon

    Messages:
    129
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I just recently watched this video, and it cleared a bunch of things up for me (beginner here as well). It's long, so there will be parts that you probably already know, but it was still worth it for me to watch the whole thing. You can skip the first part where its just music and introduction, though. :)

    http://video.google.com/videoplay?docid=-7403771606765531020&hl=en&emb=1#
     
    adsensenewb, Jan 16, 2010 IP
  4. nicki123

    nicki123 Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thank you i get my answer

    thanks
     
    nicki123, Jan 16, 2010 IP
  5. johagulo

    johagulo Peon

    Messages:
    879
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #5
    A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element.
     
    johagulo, Jan 16, 2010 IP
    johagulo likes this.
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,513
    Likes Received:
    1,930
    Best Answers:
    247
    Trophy Points:
    515
    #6
    Christ haven't they banned you yet with your completely off-topic random posts that seem to have nothing to do with what's being discussed in ANY thread?

    I know I've hit report like three times.
     
    deathshadow, Jan 16, 2010 IP
  7. mattodue

    mattodue Greenhorn

    Messages:
    54
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #7
    LOL --- that's funny...thanks for the laugh! I was wondering the same thing in the previous post.
     
    mattodue, Jan 16, 2010 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,513
    Likes Received:
    1,930
    Best Answers:
    247
    Trophy Points:
    515
    #8
    Check out that spambots other posts - if that's an actual legitimate poster I'm the Queen of Sheeba. I smell spamming to get to the point links are allowed in signatures.
     
    deathshadow, Jan 16, 2010 IP