Position (relative, absolute) in React Native - UI Render Trace

Component - Position (relative, absolute)

This React Native component demonstrates how relative and absolute positioning work. The blue box is positioned normally (relative), and the red box is positioned absolutely inside the parent container, overlapping the blue box.

Widget Tree

View
├─ View (blue box)
└─ View (red box, absolute positioned)

The root View is the container. Inside it, there are two child Views: the first is the blue box positioned normally (relative by default), and the second is the red box positioned absolutely, placed on top of the blue box near the top-right corner.

Render Trace - 3 Steps

Step 1: View (container)

Step 2: View (blue box)

Step 3: View (red box)

State Change - Re-render

Trigger:No state change in this static layout example.

Before

Initial render with blue box relative and red box absolute.

→

After

No change.

Re-renders:No re-render occurs as there is no state change.

UI Quiz - 3 Questions

What does setting position: 'absolute' do to the red box in this layout?

A It makes the red box take up space pushing other elements down.

B It removes the red box from normal layout flow and positions it relative to the container.

C It hides the red box behind the blue box.

D It centers the red box inside the blue box automatically.

Key Insight

Using position 'absolute' lets you place elements anywhere inside their parent container without affecting other elements' layout. Position 'relative' keeps elements in normal flow but allows small shifts. This helps create layered or overlapping UI designs in mobile apps.