5 min read
•Question 4 of 49mediumWhat are CSS Position Values?
Understanding static, relative, absolute, fixed, and sticky positioning.
What You'll Learn
- All position values
- When to use each
- Positioning context
Position Values
| Value | Behavior |
|---|---|
| static | Default, normal flow |
| relative | Offset from normal position |
| absolute | Removed from flow, relative to positioned ancestor |
| fixed | Relative to viewport |
| sticky | Hybrid of relative and fixed |
Examples
styles.cssCSS
/* Relative - offset from normal position */
.relative {
position: relative;
top: 10px;
left: 20px;
}
/* Absolute - relative to positioned parent */
.absolute {
position: absolute;
top: 0;
right: 0;
}
/* Fixed - stays in place on scroll */
.fixed-header {
position: fixed;
top: 0;
width: 100%;
}
/* Sticky - sticks when scrolled to */
.sticky-nav {
position: sticky;
top: 0;
}