Position absolute in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the effect of position: absolute

What happens to an element with position: absolute inside a container without any positioning?

A It becomes fixed to the viewport and does not move when scrolling.

B It stays in the normal document flow and pushes other elements down.

C It positions itself relative to the nearest positioned ancestor or the viewport if none exists.

D It disappears from the page and is not visible.

💡 Hint

Think about what happens if no parent has position set.

An element with position: absolute is taken out of the normal flow and positioned relative to the nearest ancestor that has a positioning other than static. If no such ancestor exists, it positions relative to the initial containing block (usually the viewport).

📝 Syntax

intermediate

CSS positioning syntax and effect

Given this CSS, what will be the position of the red box relative to the blue container?

.container { position: relative; width: 200px; height: 200px; background: blue; }
.box { position: absolute; top: 20px; left: 30px; width: 50px; height: 50px; background: red; }

A The red box will be hidden behind the blue container.

B The red box will be 20px from the top and 30px from the left inside the blue container.

C The red box will be centered inside the blue container.

D The red box will be 20px from the top and 30px from the left of the entire page.

💡 Hint

Check the container's position property.

Because the container has position: relative, the absolutely positioned red box uses it as the reference point. So top: 20px and left: 30px place the red box inside the blue container at those distances.

❓ rendering

advanced

Visual stacking order with position: absolute

Consider this HTML and CSS:

<div class='parent'><div class='child1'>A</div><div class='child2'>B</div></div>
.parent { position: relative; width: 150px; height: 150px; background: lightgray; }
.child1 { position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background: red; z-index: 1; }
.child2 { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background: blue; }

Which box will appear on top visually?

A The red box (child1) will appear on top because it has a higher z-index.

B Both boxes will appear side by side without overlapping.

C The blue box (child2) will appear on top because it is declared later in the HTML.

D The red box will be hidden behind the blue box because it has a lower z-index.

💡 Hint

Remember how z-index controls stacking order.

The red box has z-index: 1 which is higher than the default z-index: auto of the blue box. This means the red box will be drawn on top of the blue box where they overlap.

❓ selector

advanced

Selecting absolutely positioned elements with CSS

Which CSS selector will select only the elements that have position: absolute applied?

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

B .absolute

C :is([style*='position: absolute'])

D :where([style*='position: absolute'])

💡 Hint

Think about how to select elements by inline style attribute.

Only option A uses an attribute selector to find elements with inline styles containing position: absolute. The others are pseudo-class selectors that do not select by style attribute.

❓ accessibility

expert

Accessibility considerations for absolutely positioned elements

When using position: absolute for UI elements like modals or tooltips, what is the most important accessibility practice?

A Avoid using semantic HTML elements inside absolutely positioned containers.

B Hide the element from screen readers by using <code>aria-hidden='true'</code> always.

C Use <code>position: fixed</code> instead to avoid accessibility issues.

D Ensure the element is reachable and announced by screen readers using ARIA roles and keyboard focus management.

💡 Hint

Think about users who rely on keyboard and screen readers.

Absolutely positioned UI elements like modals must be accessible. This means managing keyboard focus so users can tab into and out of them, and using ARIA roles (like role='dialog') so screen readers announce them properly.

Practice

1. What does position: absolute; do to an element in CSS?

easy

A. It makes the element stay in the normal page flow.

B. It places the element exactly where you want inside its nearest positioned ancestor.

C. It hides the element from the page.

D. It makes the element fixed to the browser window.

Solution

1. Step 1: Understand position absolute behavior

   Position absolute removes the element from normal flow and places it relative to the nearest positioned ancestor.

2. Step 2: Compare with other position types

   Unlike static or fixed, absolute positions relative to a parent with position set, not the viewport or normal flow.

3. Final Answer:

   It places the element exactly where you want inside its nearest positioned ancestor. -> Option B

4. Quick Check:

   Position absolute = relative to nearest positioned parent [OK]

Hint: Absolute means position relative to nearest positioned parent [OK]

Common Mistakes:

• Thinking absolute keeps element in normal flow
• Confusing absolute with fixed position
• Assuming absolute always positions relative to viewport

2. Which CSS snippet correctly positions an element 20px from the top and 30px from the left using absolute positioning?

easy

A. position: fixed; top: 20px; left: 30px;

B. position: relative; top: 20px; left: 30px;

C. position: absolute; top: 20px; left: 30px;

D. position: static; top: 20px; left: 30px;

Solution

1. Step 1: Identify correct position property

   Only position: absolute; allows exact placement with top and left.

2. Step 2: Check the offset properties

   Using top: 20px; and left: 30px; moves the element 20px down and 30px right from its positioned ancestor.

3. Final Answer:

   position: absolute; top: 20px; left: 30px; -> Option C

4. Quick Check:

   Absolute + top/left = exact position [OK]

Hint: Use position absolute with top and left for exact placement [OK]

Common Mistakes:

• Using position relative instead of absolute
• Using position static which ignores top/left
• Confusing fixed with absolute positioning

3. Given this HTML and CSS, where will the red box appear?

<div class='container'>
  <div class='box'>Red Box</div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
  background: lightgray;
}
.box {
  position: absolute;
  top: 50px;
  right: 20px;
  width: 100px;
  height: 50px;
  background: red;
  color: white;
}

medium

A. Inside the container, 50px from top and 20px from right edge

B. At the top-left corner of the page

C. Centered inside the container

D. Outside the container, 50px from top and 20px from right edge

Solution

1. Step 1: Identify container positioning

   The container has position: relative;, so it becomes the reference for absolute children.

2. Step 2: Locate the box using top and right

   The box is positioned 50px from the top and 20px from the right inside the container.

3. Final Answer:

   Inside the container, 50px from top and 20px from right edge -> Option A

4. Quick Check:

   Absolute inside relative = positioned inside container [OK]

Hint: Absolute inside relative positions relative to container [OK]

Common Mistakes:

• Thinking absolute positions relative to page if parent is relative
• Ignoring right property and assuming left positioning
• Assuming box is centered without explicit centering

4. Why does this absolutely positioned element not move 10px from the top as expected?

.child {
  position: absolute;
  top: 10px;
}
.parent {
  width: 300px;
  height: 300px;
  background: blue;
}

The HTML is:

<div class='parent'>
  <div class='child'>Hello</div>
</div>

medium

A. Because the child element must have position: relative instead

B. Because top: 10px is invalid without left or right

C. Because absolute positioning requires display: block on parent

D. Because the parent has no position set, so child positions relative to the page

Solution

1. Step 1: Check parent positioning

   The parent has no position set, so it defaults to static, which does not create a positioning context.

2. Step 2: Understand absolute positioning reference

   The child with position absolute will position relative to the nearest positioned ancestor or the page if none exists.

3. Final Answer:

   Because the parent has no position set, so child positions relative to the page -> Option D

4. Quick Check:

   Absolute needs positioned parent to position inside it [OK]

Hint: Set parent position to relative for absolute child positioning [OK]

Common Mistakes:

• Assuming absolute always positions inside parent
• Thinking top needs left or right to work
• Believing display property affects absolute positioning

5. You want to place a tooltip box exactly 10px above a button inside a container. The container has position: relative;. Which CSS for the tooltip ensures it appears above the button using absolute positioning?

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: black;
  color: white;
  padding: 5px;
  border-radius: 3px;
}

hard

A. This CSS places the tooltip 10px above the button, centered horizontally.

B. This CSS places the tooltip below the button, offset by 10px.

C. This CSS places the tooltip inside the button, overlapping text.

D. This CSS ignores the container's position and places tooltip at page top.

Solution

1. Step 1: Understand bottom: 100% usage

   Setting bottom: 100% places the tooltip exactly at the top edge of the button.

2. Step 2: Apply transform for offset and centering

   translateX(-50%) centers horizontally, and translateY(-10px) moves it 10px further up.

3. Final Answer:

   This CSS places the tooltip 10px above the button, centered horizontally. -> Option A

4. Quick Check:

   bottom 100% + translateY(-10px) = 10px above [OK]

Hint: Use bottom 100% plus translateY(-10px) to move above element [OK]

Common Mistakes:

• Using top instead of bottom for positioning above
• Not centering with translateX(-50%)
• Forgetting container must be relative