HTML & CSS LayoutLesson 21Free preview

Positioning & Z-Index

This lesson is part of Intro to HTML & CSS · All levels

Summary

This lesson discusses the control of the position of the elements: static, relative, absolute, fixed, and sticky, as well as offset properties such as top and left. You also learn about the z-index to arrange stacks of overlapping elements. Proper position opens up layout patterns like header attachments and badges on cards.

Key points

Relative shifting elements from their original position; absolute relative to the positioning parent
Fixed attached to the viewport; sticky attached when scrolling in its parent
Z-index sets the stack order on the positioning element

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.