Position absolute in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does position: absolute; do in CSS?

It removes the element from the normal page flow and positions it relative to the nearest positioned ancestor (an ancestor with position set to relative, absolute, or fixed). If none exists, it positions relative to the page (viewport).

beginner

Which CSS properties control the position of an element with position: absolute;?

The properties top, right, bottom, and left control where the element is placed.

beginner

How does position: absolute; affect the space the element takes on the page?

The element does not take up space in the normal flow, so other elements behave as if it is not there.

intermediate

What happens if no ancestor has a position other than static when using position: absolute;?

The element is positioned relative to the initial containing block, usually the browser window (viewport).

intermediate

Why might you use position: relative; on a parent element when using position: absolute; on a child?

Setting position: relative; on the parent creates a positioning context so the absolutely positioned child is placed relative to that parent, not the whole page.

What does position: absolute; do to an element?

A Makes it invisible

B Keeps it in normal flow but changes its color

C Fixes it to the bottom of the page always

D Removes it from normal flow and positions it relative to nearest positioned ancestor

position: absolute; removes the element from normal flow and positions it relative to the nearest ancestor with a position other than static.

If no parent has position set, where does an absolutely positioned element get placed?

A Relative to the browser window (viewport)

B Relative to the first child element

C Relative to the document title

D It stays in the normal flow

Without a positioned ancestor, the element positions relative to the viewport.

Which CSS properties do you use to move an absolutely positioned element?

A font-size, color

B margin, padding

C top, right, bottom, left

D display, visibility

The top, right, bottom, and left properties control the position.

What happens to other elements when an element is position: absolute;?

A They behave as if the absolute element is not there

B They move to make space for it

C They become invisible

D They get pushed down automatically

Absolutely positioned elements do not take up space in the normal flow, so others ignore them.

Why add position: relative; to a parent when using position: absolute; on a child?

A To change the child's color

B To make the child position relative to that parent

C To hide the child element

D To make the parent disappear

Relative positioning on the parent sets the reference point for the absolutely positioned child.

Explain how position: absolute; works and how it affects layout.

Think about how the element moves and how others behave around it.

Describe why you might use position: relative; on a parent element when you have a child with position: absolute;.

Consider how the child decides where to place itself.