position (Precisely Positioning an Element)

In this lesson you'll learn precise positioning using CSS's position (relative and absolute), so you can layer an element exactly where you want it. This is for people searching "CSS position absolute relative."

position: relative means "shift slightly relative to its original position," and position: absolute means "position freely relative to a parent element." These are often used for things like layering a badge or label onto the corner of an image.

The sample code specifies position: relative; on the parent element .card, and position: absolute; top: -10px; right: -10px; on .badge inside it, layering a "NEW" badge slightly overhanging the top-right corner of the card.

A common beginner stumbling block is forgetting to specify position: relative on the parent element. Forgetting this causes the child element's position: absolute to position itself relative to the entire page instead, not where you intended. Always remember the rule: these two are meant to be used as a pair.

Specifying relative on a parent element and absolute on a child element inside it lets you freely place a part "anywhere you like inside this box." This is a frequently used technique in real projects too — for card designs, badge displays, and more.