What does position: relative do?

CSSJunior~1 min read

position: relative keeps the element in the normal flow but lets you shift it relative to its own initial position using top, right, bottom, left.

Features:

the element stays in its place in the flow and does not logically overlap its neighbors;
the shift happens visually, but the space reserved for the element stays in its original place;
the element becomes a reference point for absolute positioning of nested position: absolute elements.

Example:

css

div {
  position: relative;
  top: 10px;   /* shift down */
  left: 20px;  /* shift right */
}

Summary: relative is a mode in which the element stays in the flow but can be shifted relative to its initial position.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.