: Remember that styles applied to a parent view (like justifyContent ) will dictate the position of all nested child views. Why This Lesson Matters

is a set of tools and services built around React Native. On CodeHS, it simplifies the development process, giving you a code editor that allows you to drag and drop components, preview your app in a browser, and even run it on your own phone using a free Expo app.

Example 4 — Nested coordinate spaces (positioning children)

<div class="outer-container"> <div class="header"> <h1>Welcome</h1> </div> <div class="content"> <p>This is a nested paragraph inside a content div.</p> <button>Click Me</button> </div> </div>

Place a third inside the second one. Make it smaller (e.g., 100x100 ) and choose a third color.

In CSS, if a parent has position: relative , a child with position: absolute will be positioned relative to the parent—not the whole page. This is a powerful nesting technique.

Inside the top-level View , add another View . This will be the first of the three nested views:

This exposition explains the concept and practice of nested views as presented in CodeHS-style curricula (often in web/app UI contexts using HTML/CSS/JS or simple UI frameworks). It covers what nested views are, why they’re useful, common patterns, pitfalls, and concrete examples with code and step-by-step explanations so you can apply the concept.

This foundation directly prepares you for the next exercises in the module, including "2.3.10 Andy Warhol Image" and future projects like building a calculator or a login page.

I can provide the exact code modifications to fix your layout rules. Share public link

Are you working with or Karel canvas graphics ? Share public link