CSS Position Explained for Beginners 🎯

One of the most confusing topics in CSS is position. The good news? There are only 5 main position values you need to know.

1. Static (Default)

Every HTML element is static by default. It follows the normal page layout.

.box {
position: static;
}

1. Relative

relative keeps the element in its original place but lets you move it.

.box {
position: relative;
top: 20px;
left: 30px;
}

1. Absolute

absolute positions an element relative to its nearest positioned parent.

.parent {
position: relative;
}

.child {
position: absolute;
top: 10px;
right: 10px;
}

Perfect for badges and icons.

1. Fixed

A fixed element stays in the same place even while scrolling.

.navbar {
position: fixed;
top: 0;
}

Best example: Sticky navigation bar.

1. Sticky

Sticky behaves like relative until you scroll, then it sticks.

.header {
position: sticky;
top: 0;
}

Great for table headers and section titles.