Learn core CSS principles, master CSS layout techniques, explore CSS positioning, work with typography fonts, and refine your understanding of the CSS box model and responsive CSS design.

Become a Web Developer

This module takes you into the essentials of web design and using CSS to build dynamic, visually appealing websites. You’ll start by mastering the core principles of CSS, including selectors, properties, and browser whitespace. As you advance, you'll dive into CSS layouts, learning about document flow control, CSS units, and various CSS positioning techniques. In the final part, you’ll explore typography, background manipulation, and image styling to create polished, engaging web content. By the end, you will be equipped to design and develop responsive, professional web layouts.

Learn CSS

Let's discuss relative positioning in more detail.
## Relative positioning with the `top`, `right`, `bottom` and `left` values

As we mentioned above, `position: relative` is like a switch that turns on the `top`, `right`, `bottom`,
and `left` properties.

When the `top`, `right`, `bottom`, and `left` properties are used on an element that has the `position` property
set to `relative`, this is what happens:
- The element gets moved from its normal position in the document flow by the exact number
of pixels we specified in the `top`, `right`, `bottom`, or `left` properties.
- The `top`, `right`, `bottom`, or `left` properties can have negative and positive values. For
example, `-100px` or `100px`.



Let's discuss relative positioning in more detail.
# Relative positioning with the `top`, `right`, `bottom` and `left` values

As we mentioned above, `position: relative` is like a switch that turns on the `top`, `right`, `bottom`,
and `left` properties.

When the `top`, `right`, `bottom`, and `left` properties are used on an element that has the `position` property
set to `relative`, this is what happens:
- The element gets moved from its normal position in the document flow by the exact number
of pixels we specified in the `top`, `right`, `bottom`, or `left` properties.
- The `top`, `right`, `bottom`, or `left` properties can have negative and positive values. For
example, `-100px` or `100px`.



Learn to practice CSS relative positioning with top, right, bottom, and left values.  

Getting Started with CSS

CSS Core Concepts

CSS Units

CSS Essentials

Unlocking Flexible Layouts with CSS Display

CSS Positioning

Typography in CSS

Backgrounds and Colors

Images and Floats in CSS

Conclusion

Relative Positioning