← HTML & CSS

Positioning

A CSS property that sets how an element is positioned. Values: static (default), relative, absolute, fixed or sticky. Offset properties (top, right, bottom, left) take effect on non-static elements.

Part of: HTML and CSS Journey — Module 50

Understanding Positioning in HTML & CSS

What it does: position: relative nudges the element using offset properties. The space the element occupied in normal flow is preserved. The header scrolls normally until its top edge hits 0 from the viewport top, then it sticks in place like a fixed element. z-index sets the stacking order. Higher values appear in front. It only works on elements with a non-static position. 'stack-order' is not a valid CSS property. The colon is required between the property name and its value. 'position absolute' without a colon is invalid CSS. CSS requires the number and unit to be joined with no space. '10 px' with a space is an invalid value and will be ignored.

Common mistakes: CSS declarations require a colon. It should be position: absolute; not position absolute;. 'absolut' is a typo. The correct value is position: absolute;.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Positioning to a class →

This module's key terms are also in a printable crossword (Modules 43–52) and word search (Modules 43–63).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which position value keeps an element in normal flow but allows offset properties?

relativestatic

Matches

div { position absolute; }

↓

CSS declarations require a colon — it should be position: absolute; not position absolute;

Applying

Meanings

Term

position

Meaning

A CSS property that sets how an element is positioned. Values: static (default), relative, absolute, fixed or sticky. Offset properties (top, right, bottom, left) take effect on non-static elements.

Practice

.parent { position: relative; }

Testing

Gaps

div { position: ; }

Check Answer

Spots

1div { position absolute; }

2p { top: 10px; }

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which position value keeps an element in normal flow but allows offset properties?

A. static

B. relative ✓

position: relative lets you use top, left, right, bottom to nudge the element without removing it from flow. Static ignores those properties.

2. What does position: absolute do to an element?

A. Removes it from normal flow and positions it relative to its nearest positioned ancestor ✓

B. Fixes it relative to the viewport

position: absolute takes the element out of normal flow. It is anchored to the nearest ancestor with position set to anything other than static.

3. True or false: offset properties (top, left) work on position: static elements.

A. False ✓

B. True

Offset properties only work on non-static positioned elements. position: static is the default — offset properties are ignored.

4. Which position value keeps an element visible as the page scrolls?

A. fixed ✓

B. absolute

position: fixed anchors the element to the viewport. It does not move when the user scrolls. Absolute is anchored to a positioned ancestor, not the viewport.

5. True or false: position: sticky always behaves like position: fixed.

A. True

B. False ✓

sticky starts like relative — it stays in normal flow. It only becomes fixed-like when it reaches the scroll threshold defined by top, bottom, left or right.

Match the Pairs

.child { position: absolute; top: 0; right: 0; } → Removed from normal flow and anchored to the top-right corner of its nearest positioned ancestor

nav { position: fixed; top: 0; width: 100%; } → Fixed to the top of the viewport — stays visible as the page scrolls; does not move with content

position: relative offsets an element without removing it from normal flow → .box { position: relative; top: 10px; left: 20px; }

position: sticky behaves like relative until a scroll threshold is reached, then sticks → header { position: sticky; top: 0; }

div { position absolute; } → CSS declarations require a colon — it should be position: absolute; not position absolute;

p { position: relative; top: 10 px; } → There must be no space between the number and unit — write top: 10px; not top: 10 px;

Key Term

position

A CSS property that sets how an element is positioned. Values: static (default), relative, absolute, fixed or sticky. Offset properties (top, right, bottom, left) take effect on non-static elements.

Fill in the Blanks

1. div { position: relative; }

Hint: Type the position value that offsets an element from its normal flow position without removing it

2. p { position: absolute; }

Hint: Type the position value that removes an element from normal flow and positions it relative to its nearest positioned ancestor

3. nav { position: fixed; top: 0; }

Hint: Type the position value that fixes an element relative to the viewport — it stays visible on scroll

4. header { position: sticky; top: 0; }

Hint: Type the position value that behaves like relative until the element scrolls to the threshold, then sticks

5. div { position: absolute; top: 20px; }

Hint: Type the CSS offset property name that sets the distance from the top edge of the positioned ancestor

Spot the Error

Question 1

A div { position absolute; }

B p { top: 10px; }

C span { left: 20px; }

Line A — CSS declarations require a colon. It should be position: absolute; not position absolute;

Question 2

A div { position: relative; }

B p { position: absolut; }

C span { top: 5px; }

Line B — 'absolut' is a typo. The correct value is position: absolute;

Question 3

A div { position: relative; }

B nav { position: fixed; }

C p { Position: absolute; }

Line C — CSS property names must be lowercase. 'Position' should be written as 'position'.

Question 4

A div { position: relative; }

B p { position: absolute; }

C span { top: 10px; }

D a { position: stiky; }

Line D — 'stiky' is a typo. The correct value is position: sticky;

Question 5

A div { position: relative; }

B nav { position: fixed; }

C p { position: absolute; }

D span { top: 0; }

E a { position: statik; }

Line E — 'statik' is a typo. The correct value is position: static; (which is the default and rarely needs to be set explicitly).

Student with a class code? Join your class →