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

Next lesson: Position absolute

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies