What does position: absolute do?

CSSJunior~1 min read

position: absolute completely removes the element from the normal flow and lets you place it using coordinates (top, right, bottom, left) relative to the nearest positioned ancestor. If there is no positioned ancestor, the reference point becomes the whole page (viewport body/html).

Main effects

the element does not take up space in the flow: neighboring blocks behave as if it does not exist;
the position can be set precisely using coordinates;
width and height default to fitting the content (like inline-block);
the element overlaps other elements, participating in stacking (controllable via z-index).

Example:

css

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 20px;
  left: 30px;
}

Here, .child will be positioned relative to .parent.

Summary: absolute is a mode in which the element is removed from the flow and positioned precisely by coordinates relative to a positioned container.

Short Answer

Interview ready

Premium

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

What does position: absolute do?

#Main effects

Short Answer

Main effects