Positioning
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which position value keeps an element in normal flow but allows offset properties?
2. What does position: absolute do to an element?
3. True or false: offset properties (top, left) work on position: static elements.
4. Which position value keeps an element visible as the page scrolls?
5. True or false: position: sticky always behaves like position: fixed.
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1.child { position: absolute; top: 0; right: 0; } | ACSS declarations require a colon — it should be position: absolute; not position absolute; | |
| 2nav { position: fixed; top: 0; width: 100%; } | Bheader { position: sticky; top: 0; } | |
| 3position: relative offsets an element without removing it from normal flow | C.box { position: relative; top: 10px; left: 20px; } | |
| 4position: sticky behaves like relative until a scroll threshold is reached, then sticks | DThere must be no space between the number and unit — write top: 10px; not top: 10 px; | |
| 5div { position absolute; } | ERemoved from normal flow and anchored to the top-right corner of its nearest positioned ancestor | |
| 6p { position: relative; top: 10 px; } | FFixed to the top of the viewport — stays visible as the page scrolls; does not move with content |
C
Definitions
position
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
div { position: ________; }
2.
p { position: ________; }
3.
nav { position: _____; top: 0; }
4.
header { position: ______; top: 0; }
5.
div { position: absolute; ___: 20px; }
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
div { position absolute; }
B
p { top: 10px; }
C
span { left: 20px; }
Question 2
A
div { position: relative; }
B
p { position: absolut; }
C
span { top: 5px; }
Question 3
A
div { position: relative; }
B
nav { position: fixed; }
C
p { Position: absolute; }
Question 4
A
div { position: relative; }
B
p { position: absolute; }
C
span { top: 10px; }
D
a { position: stiky; }
Question 5
A
div { position: relative; }
B
nav { position: fixed; }
C
p { position: absolute; }
D
span { top: 0; }
E
a { position: statik; }
Answer Key
Positioning
Section A: Quick Questions
Q1
B — relative
Q2
A — Removes it from normal flow and positions it relative to its nearest positioned ancestor
Q3
A — False
Q4
A — fixed
Q5
B — False
Section B: Match the Pairs
Q1
.child {
position: absolute;
top: 0;
right: 0;
} → Removed from normal flow and anchored to the top-right corner of its nearest positioned ancestor
Q2
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
Q3
position: relative offsets an element without removing it from normal flow → .box {
position: relative;
top: 10px;
left: 20px;
}
Q4
position: sticky behaves like relative until a scroll threshold is reached, then sticks → header {
position: sticky;
top: 0;
}
Q5
div { position absolute; } → CSS declarations require a colon — it should be position: absolute; not position absolute;
Q6
p { position: relative; top: 10 px; } → There must be no space between the number and unit — write top: 10px; not top: 10 px;
Section C: Definitions
Q1
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.Section D: Fill in the Blanks
Q1
div { position: relative; }Q2
p { position: absolute; }Q3
nav { position: fixed; top: 0; }Q4
header { position: sticky; top: 0; }Q5
div { position: absolute; top: 20px; }Section E: Spot the Error
Q1
A — CSS declarations require a colon. It should be position: absolute; not position absolute;
Q2
B — 'absolut' is a typo. The correct value is position: absolute;
Q3
C — CSS property names must be lowercase. 'Position' should be written as 'position'.
Q4
D — 'stiky' is a typo. The correct value is position: sticky;
Q5
E — 'statik' is a typo. The correct value is position: static; (which is the default and rarely needs to be set explicitly).