Definition:
It means when you add an element to your webpage and want to place it exactly where you like — such as top-right, center, or bottom-left — then the position property helps you do that.
It decides whether your element follows the normal document flow, stays fixed on the screen, or moves based on its parent box.
Syntax:
selector {
position: static | relative | absolute | fixed | sticky;
}Type of CSS Position Properties:
- Static: Default value. Element stays in normal flow. Top, left don’t work here.
- Relative: Moves from its original position. Space stays reserved.
- Absolute: Moves element based on nearest parent with position (except static). Out of normal flow.
- Fixed: Always stays at the same spot on screen. Doesn’t move while scrolling.
- Sticky: Acts like relative first, then becomes fixed after scrolling. Needs to work.
Example:
/* HTML */
I am a box
/* CSS */
.container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid black;
}
.box {
position: absolute;
top: 20px;
left: 30px;
background-color: lightblue;
padding: 10px;
}Output:
- The light blue box will appear 20px from the top and 30px from the left inside the container.
- It’s placed exactly there using absolute position, based on its parent with relative.
- It stays out of the normal layout flow.
Visual example:
Light blue box
List of Properties:
- Position: Defines how an element is placed on the page (normal flow or custom position like relative, absolute, etc.).
- Top: Sets how far the element is from the top, used with positioned elements.
- Right: Sets space between the element and right edge.
- Bottom: Defines distance from the bottom of the container.
- Left: Sets how far the element is from the left side.
- Z-index: Controls which element comes in front when overlapping occurs.
- Inset: Shorthand to set top, right, bottom, and left in one go.
- Float: Moves the element to left or right, usually used in older layouts.
- Clear: Stops element from sitting next to floated items and pushes it below.
- Transform: translate(): Helps move any element manually from its original place in any direction (left, right, up, down).