Join Morten Rand-Hendriksen for an in-depth discussion in this video Position is everything, part of Making Sense of the CSS Box Model.
- When we first set up a document, … whether it be with type or HTML, … all the content is placed based on its natural position. … That means the boxes are displayed one after the other … in the natural flow of the content. … In CSS we can change the position of an element … in various ways and it all starts … with understanding the position property. … When an HTML element is added to a document, … its default position is static. … That means the element will be placed … in the normal flow of the content. … If we change position to relative, … we can use the top, right, bottom, left, … and zed-index properties to position the box … relative to its original location … without changing the overall layout. … This is akin to cutting out a word … or an image from a document and moving it somewhere else. … A hole is left where it used to be … and the box may end up overlapping other content. … The position of an element is often set to relative, … not to move it, but to make it the reference box …
- Designing with boxes
- The origin of the box in typography
- What is the CSS box model?
- Changing the contents within the box
- Floating and clearing content
- Using the clearfix
- Working with Float, Flex, and Grid
- CSS shapes