Grow your CSS skills. Land your dream job.

positioning question

  • # July 23, 2008 at 3:15 am

    if you place a div on the page in it’s default or static position. Then it would appear in the upper left corner. If you put position:relative on it you can then use top: and left to place it outside of it’s normal position. Why use position:relative? why not just use margins to move the box where you want so instead of

    { position:relative; top:100px; left:300px; }

    use this instead

    { margin-left:300px; margin-top:100px;

    box
    # July 23, 2008 at 4:27 am

    In most websites there’s little or no reason to ever use position, be it relative, absolute, fixed. I’m a firm believer in retaining the natural flow of the html layout using margin, padding and float to ‘nudge’ elements into place. However, there are occasions when you might wish to tweak an elements’ position relative to its natural position in the html flow – to line-up an image with a border perhaps or a myriad of other reasons. Also, position:relative; is often used as an IE6 hack along with zoom to force IE6 to behave itself. I agree that position is grossly over used in web design and I think this is a legacy of the transition for many web designers converting from table-based layouts and utilising the ‘layers’ feature in Dreamweaver. Whatever the reason, the position element is certainly abused by many designers, but remains perfectly valid if used appropriately.

    # July 23, 2008 at 2:23 pm

    that’s some interesting stuff. But can you think of an example and supply one where you would need to use positioning over margins and padding

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

You must be logged in to reply to this topic.

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