Position (relative, absolute) in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does position: relative do in React Native?

It moves the element relative to its normal position without affecting other elements' layout.

beginner

What is the effect of position: absolute in React Native?

It removes the element from the normal layout flow and positions it relative to its closest positioned ancestor.

beginner

Which CSS properties are commonly used with position: absolute to place an element?

Top, right, bottom, and left are used to specify the exact position of the element.

intermediate

If a parent has position: relative, how does it affect a child with position: absolute?

The child will be positioned relative to the parent, not the whole screen.

beginner

Why might you use position: relative instead of position: absolute?

To shift an element slightly without removing it from the layout flow, keeping space reserved.

What happens to an element with position: absolute in React Native?

A It stays in the normal layout flow.

B It moves relative to its normal position.

C It becomes invisible.

D It is removed from the layout flow and positioned relative to the nearest positioned ancestor.

An absolutely positioned element is removed from the normal layout and positioned relative to the closest ancestor with position set.

Which property is NOT used to position an element with position: absolute?

A top

B left

C margin

D bottom

Margin affects spacing but does not directly position an absolutely positioned element.

If no ancestor has a position set, where does an absolute element position itself?

A Relative to the screen or root container

B Relative to its parent with position: relative

C Relative to its sibling elements

D It stays in the normal flow

Without a positioned ancestor, absolute elements position relative to the root container or screen.

What does position: relative NOT do?

A Remove the element from the layout flow

B Reserve space in the layout

C Shift the element from its normal spot

D Allow child absolute elements to position relative to it

Relative positioning keeps the element in the layout flow; it does not remove it.

Which is a good use case for position: absolute?

A To slightly nudge text inside a button

B To overlay a badge on an icon

C To add margin between paragraphs

D To center text inside a container

Absolute positioning is great for overlays like badges that need to float over other elements.

Explain how position: relative and position: absolute work together in React Native layout.

Think about how a child element can move inside a parent container.

Describe a real-life example where you would use position: absolute in a mobile app UI.

Imagine placing a small icon on top of a profile picture.