From the course: Making Sense of the CSS Box Model

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Position is everything

Position is everything - CSS Tutorial

From the course: Making Sense of the CSS Box Model

Start my 1-month free trial

Position is everything

“

- 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…

Contents