CSS POSITIONING

What is CSS Position?

-CSS position is a property that tells the browser how and where to place an HTML element on a webpage.

Simple definition:

The position property controls the location of an element on the webpage.

*Types of CSS Position
*
There are 5 types of CSS positioning:

1.static
2.relative
3.absolute
4.fixed
5.sticky

1. position: relative

The element starts in its normal position.

Then you can move it using top, left, right, or bottom.

Example
.box {
position: relative;
left: 20px;
}
How it works

Before:

[BOX]

After:

 [BOX]

The box moves 20 pixels to the right, but its original space is still kept.

Use
Small adjustments
Creating a parent for absolutely positioned elements

2. position: absolute

The element is removed from the normal layout.

It is placed relative to its nearest parent that has a position other than static.

Example
.parent {
position: relative;
}

.box {
position: absolute;
top: 20px;
right: 20px;
}
HOW ITS WORKS
+------------------+
| BOX |
| |
| |
+------------------+

The box is placed exactly where you tell it.

Use
Badges
Popups
Icons
Labels on images

3.position: sticky

The element behaves like relative at first.

When you scroll to it, it sticks to the top (or another specified position).

header {
position: sticky;
top: 0;
}

Before scrolling:

Header

Content

*After scrolling:
*
Header ← stays at the top

Content keeps moving
Use when:
Navigation bars
Table headers
Side menus

Easy Way to Remember

relative - Move a little from the normal position.
absolute - Place the element exactly where you want inside its parent.
sticky - Move normally, then stick to the top when scrolling.

**Real-Life Example

**Imagine a classroom:
Relative → One student slides their chair a little but keeps their place.
Absolute → A teacher hangs a poster at a specific spot on the wall.
Sticky → A notice board scrolls with the page until it reaches the top, then it stays visible