Demon Tech Roadmap

CSS

CSS Position

CSS position changes where an element sits on the screen.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

CSS removes elements from the normal document flow to place them exactly where you want. You can lock navigation bars to the top of the screen or layer images over one another. Top, bottom, left, and right properties adjust the final spot.

Example

1/* this locks an element in place */
2.nav {
3  position: fixed;
4  top: 0;
5  width: 100%;
6}

Key Points

The `static` value is the default document flow.
The `relative` value moves an element from its normal spot.
The `absolute` value positions an element inside its nearest positioned parent.
The `fixed` value locks the element to the browser window.

Up Next

Continue your journey with the next topic.

Go to CSS Z-index ❯