Summary

In the 4th CSS lesson, we learned how to precisely position elements on a page.

And we learned that:

• Block elements are naturally as wide as their parent, but we can set their width and height.
• We can change an element to a block element using display: block;.
• We cannot set the width and height of inline elements.
• We can change the display of an element to an inline element using display: inline;.
• Inline-block display behaves like inline display, but we can set the width and height.
• The default position of elements is static. It places elements from left to right and top to bottom.
• We can offset non static elements from: left, right, top, bottom.
• Relative position is like static position, but we can offset it from the static position.
• Absolute position is offset from the nearest parent with a non static position or from the page (if the parents only have static position).
• An element with absolute position is ignored by other elements.
• Fixed position is the same as absolute position, but it does not move when the page is scrolled.
• Sticky position is the same as relative position, but it does not disappear from the page when scrolling and remains stuck to the corner of the page.

In the next lesson, we will look at how to set specific colors for text and background.