Position relative in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding position: relative effect on layout

What happens to the space originally occupied by an element when you apply position: relative and move it using top or left properties?

A The element moves visually, but the original space it occupied remains reserved in the layout.

B The element moves and the layout adjusts, removing the original space it occupied.

C The element stays in place and only its content moves inside it.

D The element disappears from the layout and only appears where moved.

💡 Hint

Think about whether the element's original spot is still counted by other elements.

When an element is position: relative, it moves visually but the space it originally took up in the page layout remains reserved. This means other elements behave as if it did not move.

📝 Syntax

intermediate

Which CSS snippet correctly moves an element 20px down and 10px right using position relative?

Choose the CSS code that correctly moves an element 20px down and 10px right using position: relative.

A position: relative; bottom: 20px; right: 10px;

B position: relative; top: 20px; left: 10px;

C position: relative; top: -20px; left: -10px;

D position: absolute; top: 20px; left: 10px;

💡 Hint

Positive top moves down, positive left moves right.

With position: relative, top: 20px moves the element 20px down, and left: 10px moves it 10px right.

❓ rendering

advanced

Visual result of relative positioning with negative values

Given this CSS, what will you see in the browser?

.box { position: relative; top: -15px; left: -30px; width: 100px; height: 100px; background-color: blue; }

A No blue box appears because negative values are invalid.

B A blue box shifted 15px down and 30px right, overlapping other content.

C A blue box shifted 15px up and 30px left from its original position, with original space still reserved.

D A blue box stays in place but its content moves inside it.

💡 Hint

Negative top moves up, negative left moves left.

Negative top moves the element up, negative left moves it left. The original space remains reserved because of position: relative.

❓ selector

advanced

Which CSS selector targets only elements with position relative?

Which CSS selector correctly selects all elements that have position: relative applied?

A *[style*='position: relative']

B :is([style*='position: relative'])

C :where([style*='position: relative'])

D There is no pure CSS selector to select elements by computed style.

💡 Hint

Think about how CSS selectors work versus styles applied in CSS or inline.

CSS selectors cannot select elements based on computed styles like position. They only select by tag, class, id, attributes, or pseudo-classes.

❓ accessibility

expert

Accessibility impact of using position: relative with large offsets

What is a potential accessibility concern when using position: relative with large top or left offsets to move content visually?

A Screen readers may read content in the original order, causing confusion if visual order differs.

B Keyboard navigation will automatically follow the visual position of elements.

C Users with color blindness will not see the moved content.

D There is no accessibility concern because relative positioning does not affect content order.

💡 Hint

Think about how assistive technologies read content versus how it looks visually.

Using position: relative to move content visually does not change the DOM order. Screen readers and keyboard navigation follow the DOM order, which can differ from visual order, causing confusion.