Grow your CSS skills. Land your dream job.

help with relative, absolute position experiment

  • # June 10, 2008 at 10:41 pm

    I created one div with three different rules. One rule is position:relative, rule 2 is position:absolute and the third rule is no positioning. I gave it a top:20px left20px and I noticed that the absolute position did not move as far than the relative even though they both have the same value of top and left. So all i did was change the id in the div to one of the three rules to see how it would perform. I dont get why it moves this way. can you explain?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"&gt;
    <html>
    <style type="text/css">
    #position1
    {
    position:relative;
    width:50px;
    height:50px;
    background-color:red;
    left:20px;
    top:20px;

    }

    #position2
    {
    position:absolute;
    width:50px;
    height:50px;
    background-color:red;
    top:20px;
    left:20px;
    }

    #regular
    {
    width:50px;
    height:50px;
    background-color:red;
    }

    </style>
    <head>

    </head>
    <body>
    <div id="regular">
    </div>
    </body>
    </html>

    box
    # June 11, 2008 at 4:11 am

    You haven’t taken into account the browsers default stylesheet – which adds about 20 pixels to the relative and non-positioned elements. The absolutely positioned element is not affected by the browser because its position is absolute ;)

    Add

    Code:
    *{
    margin:0;
    padding:0;
    }

    to your style sheet and have another look.

    # June 11, 2008 at 10:25 am

    hmm. that is interesting. thanks.

    # June 12, 2008 at 11:23 am

    interesting setup, I tried it as well, and looked at it using Firebug.
    without the * {margin: 0; padding: 0;} specified, Firebug shows an 8px space
    around the red block, IE7 also shows that same space.

    specifying * {margin: 0; padding: 0;} eliminates the space around the red block,
    as expected.

    I guess the thing that this shows us is that HTML elements have unspecified property
    values that are not immediately evident and that you as HTML page author must find
    out what these are and how they will affect your page layout in the various browsers
    in use today. another reason CSS resets like * {margin: 0; padding: 0;} are used,
    to eliminate that variability.

    Al

    box
    # June 12, 2008 at 7:19 pm

    HTML doesn’t have any inherent properties – it’s the browsers that applies extra styling based on arbitrary conventions to allow unstyled documents to be easily readable. That’s why many developers apply a reset stylesheet (as used by Eric Myer). Without any reset you’ll see subtly different styles applied by Firefox, Safari, IE, Opera and so on.
    The kind of reset you choose to use is down to experience and preference – I for one don’t use the Eric Myer reset as I don’t mind some of the browser styling, so I prefer a simplified reset. But while you discover your preference I would recommend applying the *{margin:0;padding:0;} reset rule.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".