Position static and relative
Learn position: static and relative values.
The position property and static
The position property decides how an element is placed. The default value is static: the element sits in the normal document flow, and top, right, bottom, left have no effect.
So for most elements you never write position. The non-static values come into play only when you offset, shift or pin an element.
Shift with position: relative
The position: relative declaration nudges an element from its normal flow. First its place is computed, then it is offset by the top, right, bottom, left values. Surrounding elements do not move; the original spot is still reserved.
For example, top: 10px shifts the element 10 pixels down, but the element below it stays put.
top, right, bottom, left
These four properties gain meaning only when position is something other than static. top: 20px pulls the element 20 pixels down from the top edge; left: 10px pushes it 10 pixels right from the left edge. Negative values work too.
For position: relative, these values are measured from the element's original spot. The element shifts, but its surroundings are not affected.
Exercise Nudge the badge up and right
Write a .ribbon class selector and assign three declarations: position: relative, top: -8px, left: 12px. The ribbon badge will then shift a little up and right from its original spot.
Show example solution
/* nudge the badge */
.ribbon {
position: relative;
top: -8px;
left: 12px;
}Test yourself
-
Which is the default value of position?
- relative
- absolute
- fixed
- static
Show answer
static — Correct. static is the default value of the position property.
-
Prepare the badge to shift
.badge { ____; top: 4px; }Show answer
.badge { position: relative; top: 4px; } -
Match each value to its meaning
- static
- Stays in the flow
- relative
- Holds place, shifts
- top: 10px
- Down 10 pixels