Position static in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the default position property

What is the default behavior of an element with position: static; in CSS?

A The element is absolutely positioned relative to the initial containing block.

B The element is positioned relative to its nearest positioned ancestor and can be moved using top, bottom, left, and right.

C The element is positioned according to the normal flow of the page and ignores top, bottom, left, and right properties.

D The element is fixed relative to the viewport and does not move when scrolling.

💡 Hint

Think about how elements behave when you don't set any position property.

By default, elements have position: static;. This means they follow the normal flow of the document. The properties top, bottom, left, and right do not affect them.

📝 Syntax

intermediate

CSS position property syntax

Which CSS snippet correctly sets an element's position to static?

A position: 'static';

B position = static;

C pos: static;

D position: static;

💡 Hint

Remember the correct CSS property syntax uses a colon and no quotes for values.

The correct syntax for CSS properties is property: value;. The value static is a keyword and should not be in quotes.

❓ rendering

advanced

Visual effect of position static with offsets

Given this CSS:

div {
  position: static;
  top: 20px;
  left: 30px;
  background-color: lightblue;
  width: 100px;
  height: 100px;
}

What will you see in the browser?

A A light blue box 100x100 pixels positioned normally ignoring top and left offsets.

B A light blue box shifted 20px down and 30px right from its normal position.

C No box visible because top and left cause an error with static position.

D A light blue box fixed at 20px from top and 30px from left of the viewport.

💡 Hint

Remember how position: static; treats offset properties.

With position: static;, the top and left properties are ignored. The box appears in the normal flow with the specified size and background color.

❓ selector

advanced

Selecting elements with static position

Which CSS selector will select only elements that have position: static; explicitly set in their inline style attribute?

A .static

B [style*='position: static']

C div[position='static']

D :static

💡 Hint

Think about attribute selectors and how inline styles are matched.

The attribute selector [style*='position: static'] matches elements whose style attribute contains the text position: static. Other options are invalid or select by class or nonexistent pseudo-class.

❓ accessibility

expert

Accessibility impact of position static on keyboard navigation

How does using position: static; affect keyboard navigation and screen reader accessibility compared to other position values?

A Elements with <code>position: static;</code> remain in the normal tab order and are read in document order by screen readers.

B Elements with <code>position: static;</code> are removed from the tab order and ignored by screen readers.

C Elements with <code>position: static;</code> become fixed on screen and trap keyboard focus.

D Elements with <code>position: static;</code> automatically get ARIA roles for better accessibility.

💡 Hint

Think about how normal flow affects focus and reading order.

Using position: static; means elements stay in the normal document flow. This keeps them in the natural tab order and screen readers read them in the order they appear in the HTML, which is best for accessibility.