.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.
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.
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:
And the css...
.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!
To learn a little more about how this absolute positioning this is used here:
http://css-tricks.com/absolute-position ... sitioning/
Thanks for the explanation - I understand it much better now.