CSS Positioning

CSS Positioning Overview

CSS Positioning allows you to control the placement of elements on a webpage. There are four main types of positioning in CSS:

Static: Default positioning, where elements flow into the document naturally.

Relative: Positions an element relative to its normal position.

Absolute: Positions an element relative to the nearest positioned ancestor.

Fixed: Positions an element relative to the viewport and remains fixed as you scroll.

Quiz: Test Your Knowledge on CSS Positioning

1. What does the `position: relative;` property do?

It positions the element relative to its normal position.
It positions the element relative to the viewport.
It removes the element from the document flow.

2. What does the `position: absolute;` property do?

It positions the element relative to the nearest positioned ancestor.
It positions the element relative to the viewport.

3. What does the `position: fixed;` property do?

It positions the element relative to the viewport and keeps it in place when scrolling.
It positions the element relative to its parent element.

CSS Positioning: Relative, Absolute, and Fixed

CSS Positioning Overview

CSS Positioning Examples

Quiz: Test Your Knowledge on CSS Positioning