Grow your CSS skills. Land your dream job.

Rounded Corner Mystery

  • # September 26, 2008 at 10:19 am

    This might seem like a dumb question to some but I´m baffled.

    In Chris´ tutorial on ‘Rounded Corners’ I have noticed something in the second example of the five techniques that is interesting.

    This is the code from the tutorial:

    Code:

    Lorem ipsum dolor

    And the css…

    Code:
    .box-two { width:300px; background:#fbeac3; border:1px solid #534515; position:relative; margin:10px 0 }
    .box-two .tl { position:absolute; etc. etc. }
    .box-two .tr { position:absolute; etc. etc. }
    .box-two .bl { position:absolute; etc. etc. }
    .box-two .br { position:absolute; etc. etc. }
    .box-two .inside { padding:20px }

    Now my question:
    Why is it, that by just giving the corner divs a position of "absolute", does it make them ‘pop’ into place in four different corners?

    After all, there is a div with a class of "inside" that is marked up before the divs that form the corners.
    How do they manage to scatter all-around the "inside" div like that?

    I´d love to understand this becuase I´ve been doing rounded corners the hard way it seems.

    Thanks!

    # September 26, 2008 at 12:11 pm

    When you give any page element a position of absolute, it is removed from the normal flow of the document (it’s not affected by other page elements and other page elements don’t affect it). It gets placed precisely where you put it, and the coordinates are relative to the closest parent above it with relative positioning. In this case, it’s the <div class="box-two"> which has the relative positioning. So the four divs are placed in the top right, top left, etc of that box.

    To learn a little more about how this absolute positioning this is used here:
    http://css-tricks.com/absolute-position … sitioning/

    # September 29, 2008 at 5:51 am

    Mmm… that is very interesting Chris.

    Thanks for the explanation – I understand it much better now.

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".