CSS TutorialLesson 23Free preview

CSS Position

This lesson is part of CSS · All levels

Summary

The position property specifies how an element is placed on a page: static, relative, absolute, fixed, or sticky. Values other than static open the possibility of shifting elements with offsets and controlling the stack order via the z-index. Understanding the reference differences of each position value is key to proper CSS layout.

Key points

Static is the built-in position; the elements follow a regular document stream.
The relative shifts the element from its original position without changing the layout of the other element.
The absolute puts the relative element to the nearest parent whose position is not static.
Fixed to the viewport so it doesn't scroll through the page.
Sticky behaves static to a certain point, then sticks like fixed.

Full lesson

Code examples and quizzes

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