When a learner can produce a familiar result but cannot explain why a small change breaks it, the difficulty is usually not effort. The missing piece is a dependable model that connects each visible action to the state underneath.
z-index is not one global scoreboard. Elements are painted inside stacking contexts, and each context is then compared as a single unit with its siblings. The reliable debugging question is therefore not “how large should this number be?” but “which context contains each element, and how is that context ordered?” This guide teaches that model immediately, then turns it into traces, worked cases, diagnostics and independent practice.
The goal is not a catalogue of tricks. By the end, a learner should be able to predict behaviour, identify the earliest incorrect assumption, select a safe procedure, and transfer the idea to a project that does not resemble the first example.
Families in Punggol can use the chapters in short sessions around schoolwork, CCAs and rest. Ten focused minutes of prediction and explanation often reveal more than an hour of copying. The examples are proposed home-learning activities, not claims about a physical branch, class schedule, result or service.
Use disposable examples, back up important work and check current behaviour against the official documentation. Technology changes; the habit of stating a model, testing a boundary and explaining evidence remains useful.
Find your next learning step
Choose the route that matches the present difficulty. The full index remains available for a systematic course.
Build the model
Chapters 1-4 . Begin with the first chapter in this route and move on after the learner can predict, test and explain.
Use the core tools
Chapters 5-8 . Begin with the first chapter in this route and move on after the learner can predict, test and explain.
Handle boundaries
Chapters 9-12 . Begin with the first chapter in this route and move on after the learner can predict, test and explain.
Debug and verify
Chapters 13-16 . Begin with the first chapter in this route and move on after the learner can predict, test and explain.
Transfer with judgment
Chapters 17-20 . Begin with the first chapter in this route and move on after the learner can predict, test and explain.
Open the full chapter index . Jump to the capstone practice . Use the How Studying Works hub . Read the official documentation
Complete chapter index
Chapters 1-4 . Build the model
Chapters 5-8 . Use the core tools
Chapters 9-12 . Handle boundaries
Chapters 13-16 . Debug and verify
Chapters 17-20 . Transfer with judgment
A stacking context is an independent three-dimensional ordering boundary whose descendants are compared internally before the whole context is placed among siblings. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is comparing descendant z-index numbers across unrelated contexts. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Draw a tree and circle every element that creates a context.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
.card{position:relative;z-index:1}Reasoning. The card and its descendants participate as one atomic unit outside the card. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: homework tracker. First, predict without running anything. Model a short list of assignments with subject, due date and completion state. Apply the chapter rule—a stacking context is an independent three-dimensional ordering boundary whose descendants are compared internally before the whole context is placed among siblings. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The card and its descendants participate as one atomic unit outside the card. In the homework tracker setting, inspect the earliest point where comparing descendant z-index numbers across unrelated contexts could occur. The safe procedure is: Draw a tree and circle every element that creates a context. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: library search. Next, isolate one variable and hold the others constant. Model book records with title, topic, shelf code and availability. Apply the chapter rule—a stacking context is an independent three-dimensional ordering boundary whose descendants are compared internally before the whole context is placed among siblings. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The card and its descendants participate as one atomic unit outside the card. In the library search setting, inspect the earliest point where comparing descendant z-index numbers across unrelated contexts could occur. The safe procedure is: Draw a tree and circle every element that creates a context. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: CCA sign-up. Now, test a boundary that a comfortable example would hide. Model activity rows with a name, weekday, capacity and registered pupils. Apply the chapter rule—a stacking context is an independent three-dimensional ordering boundary whose descendants are compared internally before the whole context is placed among siblings. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The card and its descendants participate as one atomic unit outside the card. In the CCA sign-up setting, inspect the earliest point where comparing descendant z-index numbers across unrelated contexts could occur. The safe procedure is: Draw a tree and circle every element that creates a context. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: revision planner. Then, explain the result to a study partner without using jargon as a substitute for cause. Model topics tagged by confidence, next review date and evidence. Apply the chapter rule—a stacking context is an independent three-dimensional ordering boundary whose descendants are compared internally before the whole context is placed among siblings. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The card and its descendants participate as one atomic unit outside the card. In the revision planner setting, inspect the earliest point where comparing descendant z-index numbers across unrelated contexts could occur. The safe procedure is: Draw a tree and circle every element that creates a context. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: canteen budget. Finally, transfer the rule to a new setting and state what would invalidate it. Model items with prices, quantities and a fixed spending limit. Apply the chapter rule—a stacking context is an independent three-dimensional ordering boundary whose descendants are compared internally before the whole context is placed among siblings. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The card and its descendants participate as one atomic unit outside the card. In the canteen budget setting, inspect the earliest point where comparing descendant z-index numbers across unrelated contexts could occur. The safe procedure is: Draw a tree and circle every element that creates a context. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers comparing descendant z-index numbers across unrelated contexts.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny reading log example using pages, dates, unfamiliar words and a one-sentence reflection. Make one ordinary case, one boundary case and one case that exposes comparing descendant z-index numbers across unrelated contexts. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: A stacking context is an independent three-dimensional ordering boundary whose descendants are compared internally before the whole context is placed among siblings. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why comparing descendant z-index numbers across unrelated contexts is unsafe. The final explanation should conclude with this operational step: Draw a tree and circle every element that creates a context. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
Without special stacking, backgrounds, in-flow content and positioned content follow defined painting rules and document order resolves many ties. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is adding z-index before observing ordinary source order. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Remove z-index temporarily and inspect which later sibling paints on top.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
.a,.b{position:relative}Reasoning. When other factors tie, the later painted sibling can cover the earlier one. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: revision planner. First, predict without running anything. Model topics tagged by confidence, next review date and evidence. Apply the chapter rule—without special stacking, backgrounds, in-flow content and positioned content follow defined painting rules and document order resolves many ties. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. When other factors tie, the later painted sibling can cover the earlier one. In the revision planner setting, inspect the earliest point where adding z-index before observing ordinary source order could occur. The safe procedure is: Remove z-index temporarily and inspect which later sibling paints on top. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: canteen budget. Next, isolate one variable and hold the others constant. Model items with prices, quantities and a fixed spending limit. Apply the chapter rule—without special stacking, backgrounds, in-flow content and positioned content follow defined painting rules and document order resolves many ties. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. When other factors tie, the later painted sibling can cover the earlier one. In the canteen budget setting, inspect the earliest point where adding z-index before observing ordinary source order could occur. The safe procedure is: Remove z-index temporarily and inspect which later sibling paints on top. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: weather journal. Now, test a boundary that a comfortable example would hide. Model daily observations with temperature, rain and a written note. Apply the chapter rule—without special stacking, backgrounds, in-flow content and positioned content follow defined painting rules and document order resolves many ties. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. When other factors tie, the later painted sibling can cover the earlier one. In the weather journal setting, inspect the earliest point where adding z-index before observing ordinary source order could occur. The safe procedure is: Remove z-index temporarily and inspect which later sibling paints on top. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: reading log. Then, explain the result to a study partner without using jargon as a substitute for cause. Model pages, dates, unfamiliar words and a one-sentence reflection. Apply the chapter rule—without special stacking, backgrounds, in-flow content and positioned content follow defined painting rules and document order resolves many ties. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. When other factors tie, the later painted sibling can cover the earlier one. In the reading log setting, inspect the earliest point where adding z-index before observing ordinary source order could occur. The safe procedure is: Remove z-index temporarily and inspect which later sibling paints on top. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: project board. Finally, transfer the rule to a new setting and state what would invalidate it. Model tasks moving among planned, doing, review and done states. Apply the chapter rule—without special stacking, backgrounds, in-flow content and positioned content follow defined painting rules and document order resolves many ties. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. When other factors tie, the later painted sibling can cover the earlier one. In the project board setting, inspect the earliest point where adding z-index before observing ordinary source order could occur. The safe procedure is: Remove z-index temporarily and inspect which later sibling paints on top. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers adding z-index before observing ordinary source order.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny project board example using tasks moving among planned, doing, review and done states. Make one ordinary case, one boundary case and one case that exposes adding z-index before observing ordinary source order. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: Without special stacking, backgrounds, in-flow content and positioned content follow defined painting rules and document order resolves many ties. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why adding z-index before observing ordinary source order is unsafe. The final explanation should conclude with this operational step: Remove z-index temporarily and inspect which later sibling paints on top. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
A positioned element with a non-auto z-index creates a stacking context; auto participates differently from an explicit zero. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is treating z-index:auto and z-index:0 as interchangeable. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Test auto, zero and one while watching context creation in developer tools.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
.panel{position:relative;z-index:0}Reasoning. The panel now establishes a context even though its visible rank looks modest. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: reading log. First, predict without running anything. Model pages, dates, unfamiliar words and a one-sentence reflection. Apply the chapter rule—a positioned element with a non-auto z-index creates a stacking context; auto participates differently from an explicit zero. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The panel now establishes a context even though its visible rank looks modest. In the reading log setting, inspect the earliest point where treating z-index:auto and z-index:0 as interchangeable could occur. The safe procedure is: Test auto, zero and one while watching context creation in developer tools. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: project board. Next, isolate one variable and hold the others constant. Model tasks moving among planned, doing, review and done states. Apply the chapter rule—a positioned element with a non-auto z-index creates a stacking context; auto participates differently from an explicit zero. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The panel now establishes a context even though its visible rank looks modest. In the project board setting, inspect the earliest point where treating z-index:auto and z-index:0 as interchangeable could occur. The safe procedure is: Test auto, zero and one while watching context creation in developer tools. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: homework tracker. Now, test a boundary that a comfortable example would hide. Model a short list of assignments with subject, due date and completion state. Apply the chapter rule—a positioned element with a non-auto z-index creates a stacking context; auto participates differently from an explicit zero. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The panel now establishes a context even though its visible rank looks modest. In the homework tracker setting, inspect the earliest point where treating z-index:auto and z-index:0 as interchangeable could occur. The safe procedure is: Test auto, zero and one while watching context creation in developer tools. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: library search. Then, explain the result to a study partner without using jargon as a substitute for cause. Model book records with title, topic, shelf code and availability. Apply the chapter rule—a positioned element with a non-auto z-index creates a stacking context; auto participates differently from an explicit zero. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The panel now establishes a context even though its visible rank looks modest. In the library search setting, inspect the earliest point where treating z-index:auto and z-index:0 as interchangeable could occur. The safe procedure is: Test auto, zero and one while watching context creation in developer tools. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: CCA sign-up. Finally, transfer the rule to a new setting and state what would invalidate it. Model activity rows with a name, weekday, capacity and registered pupils. Apply the chapter rule—a positioned element with a non-auto z-index creates a stacking context; auto participates differently from an explicit zero. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The panel now establishes a context even though its visible rank looks modest. In the CCA sign-up setting, inspect the earliest point where treating z-index:auto and z-index:0 as interchangeable could occur. The safe procedure is: Test auto, zero and one while watching context creation in developer tools. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers treating z-index:auto and z-index:0 as interchangeable.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny homework tracker example using a short list of assignments with subject, due date and completion state. Make one ordinary case, one boundary case and one case that exposes treating z-index:auto and z-index:0 as interchangeable. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: A positioned element with a non-auto z-index creates a stacking context; auto participates differently from an explicit zero. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why treating z-index:auto and z-index:0 as interchangeable is unsafe. The final explanation should conclude with this operational step: Test auto, zero and one while watching context creation in developer tools. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
A child with z-index 9999 cannot escape a parent context that sits below a sibling context. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is raising the child number indefinitely. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Compare the parents first; fix the boundary or move the overlay to an appropriate owner.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
.low{z-index:1}.high{z-index:2}.low .tip{z-index:9999}Reasoning. The tooltip remains inside the lower parent context. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: library search. First, predict without running anything. Model book records with title, topic, shelf code and availability. Apply the chapter rule—a child with z-index 9999 cannot escape a parent context that sits below a sibling context. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The tooltip remains inside the lower parent context. In the library search setting, inspect the earliest point where raising the child number indefinitely could occur. The safe procedure is: Compare the parents first; fix the boundary or move the overlay to an appropriate owner. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: CCA sign-up. Next, isolate one variable and hold the others constant. Model activity rows with a name, weekday, capacity and registered pupils. Apply the chapter rule—a child with z-index 9999 cannot escape a parent context that sits below a sibling context. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The tooltip remains inside the lower parent context. In the CCA sign-up setting, inspect the earliest point where raising the child number indefinitely could occur. The safe procedure is: Compare the parents first; fix the boundary or move the overlay to an appropriate owner. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: revision planner. Now, test a boundary that a comfortable example would hide. Model topics tagged by confidence, next review date and evidence. Apply the chapter rule—a child with z-index 9999 cannot escape a parent context that sits below a sibling context. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The tooltip remains inside the lower parent context. In the revision planner setting, inspect the earliest point where raising the child number indefinitely could occur. The safe procedure is: Compare the parents first; fix the boundary or move the overlay to an appropriate owner. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: canteen budget. Then, explain the result to a study partner without using jargon as a substitute for cause. Model items with prices, quantities and a fixed spending limit. Apply the chapter rule—a child with z-index 9999 cannot escape a parent context that sits below a sibling context. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The tooltip remains inside the lower parent context. In the canteen budget setting, inspect the earliest point where raising the child number indefinitely could occur. The safe procedure is: Compare the parents first; fix the boundary or move the overlay to an appropriate owner. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: weather journal. Finally, transfer the rule to a new setting and state what would invalidate it. Model daily observations with temperature, rain and a written note. Apply the chapter rule—a child with z-index 9999 cannot escape a parent context that sits below a sibling context. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The tooltip remains inside the lower parent context. In the weather journal setting, inspect the earliest point where raising the child number indefinitely could occur. The safe procedure is: Compare the parents first; fix the boundary or move the overlay to an appropriate owner. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers raising the child number indefinitely.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny library search example using book records with title, topic, shelf code and availability. Make one ordinary case, one boundary case and one case that exposes raising the child number indefinitely. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: A child with z-index 9999 cannot escape a parent context that sits below a sibling context. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why raising the child number indefinitely is unsafe. The final explanation should conclude with this operational step: Compare the parents first; fix the boundary or move the overlay to an appropriate owner. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
Flex or grid items with non-auto z-index can create stacking contexts without position. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is looking only for position declarations. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Inspect layout participation and computed z-index together.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
.item{z-index:1}Reasoning. A flex or grid item can form a context under this rule. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: canteen budget. First, predict without running anything. Model items with prices, quantities and a fixed spending limit. Apply the chapter rule—flex or grid items with non-auto z-index can create stacking contexts without position. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A flex or grid item can form a context under this rule. In the canteen budget setting, inspect the earliest point where looking only for position declarations could occur. The safe procedure is: Inspect layout participation and computed z-index together. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: weather journal. Next, isolate one variable and hold the others constant. Model daily observations with temperature, rain and a written note. Apply the chapter rule—flex or grid items with non-auto z-index can create stacking contexts without position. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A flex or grid item can form a context under this rule. In the weather journal setting, inspect the earliest point where looking only for position declarations could occur. The safe procedure is: Inspect layout participation and computed z-index together. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: reading log. Now, test a boundary that a comfortable example would hide. Model pages, dates, unfamiliar words and a one-sentence reflection. Apply the chapter rule—flex or grid items with non-auto z-index can create stacking contexts without position. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A flex or grid item can form a context under this rule. In the reading log setting, inspect the earliest point where looking only for position declarations could occur. The safe procedure is: Inspect layout participation and computed z-index together. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: project board. Then, explain the result to a study partner without using jargon as a substitute for cause. Model tasks moving among planned, doing, review and done states. Apply the chapter rule—flex or grid items with non-auto z-index can create stacking contexts without position. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A flex or grid item can form a context under this rule. In the project board setting, inspect the earliest point where looking only for position declarations could occur. The safe procedure is: Inspect layout participation and computed z-index together. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: homework tracker. Finally, transfer the rule to a new setting and state what would invalidate it. Model a short list of assignments with subject, due date and completion state. Apply the chapter rule—flex or grid items with non-auto z-index can create stacking contexts without position. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A flex or grid item can form a context under this rule. In the homework tracker setting, inspect the earliest point where looking only for position declarations could occur. The safe procedure is: Inspect layout participation and computed z-index together. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers looking only for position declarations.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny CCA sign-up example using activity rows with a name, weekday, capacity and registered pupils. Make one ordinary case, one boundary case and one case that exposes looking only for position declarations. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: Flex or grid items with non-auto z-index can create stacking contexts without position. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why looking only for position declarations is unsafe. The final explanation should conclude with this operational step: Inspect layout participation and computed z-index together. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
Opacity below one creates a stacking context so blended descendants are composited together. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is using opacity on a wrapper to dim it and accidentally trapping an overlay. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Apply colour transparency more locally when context creation is unwanted.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
.muted{opacity:.9}Reasoning. All descendants are composited in the new context. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: project board. First, predict without running anything. Model tasks moving among planned, doing, review and done states. Apply the chapter rule—opacity below one creates a stacking context so blended descendants are composited together. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. All descendants are composited in the new context. In the project board setting, inspect the earliest point where using opacity on a wrapper to dim it and accidentally trapping an overlay could occur. The safe procedure is: Apply colour transparency more locally when context creation is unwanted. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: homework tracker. Next, isolate one variable and hold the others constant. Model a short list of assignments with subject, due date and completion state. Apply the chapter rule—opacity below one creates a stacking context so blended descendants are composited together. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. All descendants are composited in the new context. In the homework tracker setting, inspect the earliest point where using opacity on a wrapper to dim it and accidentally trapping an overlay could occur. The safe procedure is: Apply colour transparency more locally when context creation is unwanted. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: library search. Now, test a boundary that a comfortable example would hide. Model book records with title, topic, shelf code and availability. Apply the chapter rule—opacity below one creates a stacking context so blended descendants are composited together. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. All descendants are composited in the new context. In the library search setting, inspect the earliest point where using opacity on a wrapper to dim it and accidentally trapping an overlay could occur. The safe procedure is: Apply colour transparency more locally when context creation is unwanted. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: CCA sign-up. Then, explain the result to a study partner without using jargon as a substitute for cause. Model activity rows with a name, weekday, capacity and registered pupils. Apply the chapter rule—opacity below one creates a stacking context so blended descendants are composited together. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. All descendants are composited in the new context. In the CCA sign-up setting, inspect the earliest point where using opacity on a wrapper to dim it and accidentally trapping an overlay could occur. The safe procedure is: Apply colour transparency more locally when context creation is unwanted. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: revision planner. Finally, transfer the rule to a new setting and state what would invalidate it. Model topics tagged by confidence, next review date and evidence. Apply the chapter rule—opacity below one creates a stacking context so blended descendants are composited together. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. All descendants are composited in the new context. In the revision planner setting, inspect the earliest point where using opacity on a wrapper to dim it and accidentally trapping an overlay could occur. The safe procedure is: Apply colour transparency more locally when context creation is unwanted. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers using opacity on a wrapper to dim it and accidentally trapping an overlay.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny revision planner example using topics tagged by confidence, next review date and evidence. Make one ordinary case, one boundary case and one case that exposes using opacity on a wrapper to dim it and accidentally trapping an overlay. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: Opacity below one creates a stacking context so blended descendants are composited together. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why using opacity on a wrapper to dim it and accidentally trapping an overlay is unsafe. The final explanation should conclude with this operational step: Apply colour transparency more locally when context creation is unwanted. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
transform, filter, perspective and several visual effects create stacking contexts even when the visual change seems harmless. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is using transform:translateZ(0) as a generic performance charm. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Remove experimental transforms and verify the context tree before optimising.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
.panel{transform:translateX(0)}Reasoning. The transform creates a new context and can change overlay relationships. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: CCA sign-up. First, predict without running anything. Model activity rows with a name, weekday, capacity and registered pupils. Apply the chapter rule—transform, filter, perspective and several visual effects create stacking contexts even when the visual change seems harmless. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The transform creates a new context and can change overlay relationships. In the CCA sign-up setting, inspect the earliest point where using transform:translateZ(0) as a generic performance charm could occur. The safe procedure is: Remove experimental transforms and verify the context tree before optimising. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: revision planner. Next, isolate one variable and hold the others constant. Model topics tagged by confidence, next review date and evidence. Apply the chapter rule—transform, filter, perspective and several visual effects create stacking contexts even when the visual change seems harmless. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The transform creates a new context and can change overlay relationships. In the revision planner setting, inspect the earliest point where using transform:translateZ(0) as a generic performance charm could occur. The safe procedure is: Remove experimental transforms and verify the context tree before optimising. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: canteen budget. Now, test a boundary that a comfortable example would hide. Model items with prices, quantities and a fixed spending limit. Apply the chapter rule—transform, filter, perspective and several visual effects create stacking contexts even when the visual change seems harmless. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The transform creates a new context and can change overlay relationships. In the canteen budget setting, inspect the earliest point where using transform:translateZ(0) as a generic performance charm could occur. The safe procedure is: Remove experimental transforms and verify the context tree before optimising. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: weather journal. Then, explain the result to a study partner without using jargon as a substitute for cause. Model daily observations with temperature, rain and a written note. Apply the chapter rule—transform, filter, perspective and several visual effects create stacking contexts even when the visual change seems harmless. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The transform creates a new context and can change overlay relationships. In the weather journal setting, inspect the earliest point where using transform:translateZ(0) as a generic performance charm could occur. The safe procedure is: Remove experimental transforms and verify the context tree before optimising. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: reading log. Finally, transfer the rule to a new setting and state what would invalidate it. Model pages, dates, unfamiliar words and a one-sentence reflection. Apply the chapter rule—transform, filter, perspective and several visual effects create stacking contexts even when the visual change seems harmless. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The transform creates a new context and can change overlay relationships. In the reading log setting, inspect the earliest point where using transform:translateZ(0) as a generic performance charm could occur. The safe procedure is: Remove experimental transforms and verify the context tree before optimising. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers using transform:translateZ(0) as a generic performance charm.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny canteen budget example using items with prices, quantities and a fixed spending limit. Make one ordinary case, one boundary case and one case that exposes using transform:translateZ(0) as a generic performance charm. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: transform, filter, perspective and several visual effects create stacking contexts even when the visual change seems harmless. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why using transform:translateZ(0) as a generic performance charm is unsafe. The final explanation should conclude with this operational step: Remove experimental transforms and verify the context tree before optimising. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
isolation:isolate and certain containment values intentionally establish boundaries that can make component layering predictable. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is introducing isolation without deciding where popovers should live. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Declare a component boundary only when its overlay contract is known.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
.widget{isolation:isolate}Reasoning. The widget’s internal layer scale no longer competes directly with outside descendants. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: weather journal. First, predict without running anything. Model daily observations with temperature, rain and a written note. Apply the chapter rule—isolation:isolate and certain containment values intentionally establish boundaries that can make component layering predictable. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The widget’s internal layer scale no longer competes directly with outside descendants. In the weather journal setting, inspect the earliest point where introducing isolation without deciding where popovers should live could occur. The safe procedure is: Declare a component boundary only when its overlay contract is known. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: reading log. Next, isolate one variable and hold the others constant. Model pages, dates, unfamiliar words and a one-sentence reflection. Apply the chapter rule—isolation:isolate and certain containment values intentionally establish boundaries that can make component layering predictable. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The widget’s internal layer scale no longer competes directly with outside descendants. In the reading log setting, inspect the earliest point where introducing isolation without deciding where popovers should live could occur. The safe procedure is: Declare a component boundary only when its overlay contract is known. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: project board. Now, test a boundary that a comfortable example would hide. Model tasks moving among planned, doing, review and done states. Apply the chapter rule—isolation:isolate and certain containment values intentionally establish boundaries that can make component layering predictable. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The widget’s internal layer scale no longer competes directly with outside descendants. In the project board setting, inspect the earliest point where introducing isolation without deciding where popovers should live could occur. The safe procedure is: Declare a component boundary only when its overlay contract is known. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: homework tracker. Then, explain the result to a study partner without using jargon as a substitute for cause. Model a short list of assignments with subject, due date and completion state. Apply the chapter rule—isolation:isolate and certain containment values intentionally establish boundaries that can make component layering predictable. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The widget’s internal layer scale no longer competes directly with outside descendants. In the homework tracker setting, inspect the earliest point where introducing isolation without deciding where popovers should live could occur. The safe procedure is: Declare a component boundary only when its overlay contract is known. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: library search. Finally, transfer the rule to a new setting and state what would invalidate it. Model book records with title, topic, shelf code and availability. Apply the chapter rule—isolation:isolate and certain containment values intentionally establish boundaries that can make component layering predictable. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The widget’s internal layer scale no longer competes directly with outside descendants. In the library search setting, inspect the earliest point where introducing isolation without deciding where popovers should live could occur. The safe procedure is: Declare a component boundary only when its overlay contract is known. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers introducing isolation without deciding where popovers should live.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny weather journal example using daily observations with temperature, rain and a written note. Make one ordinary case, one boundary case and one case that exposes introducing isolation without deciding where popovers should live. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: isolation:isolate and certain containment values intentionally establish boundaries that can make component layering predictable. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why introducing isolation without deciding where popovers should live is unsafe. The final explanation should conclude with this operational step: Declare a component boundary only when its overlay contract is known. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
Negative values move positioned layers behind peers within the current context but do not guarantee placement behind every ancestor background. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is sending an element to -9999 and losing it behind the wrong paint layer. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Use a minimal negative value and inspect ancestor backgrounds and contexts.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
.decoration{position:absolute;z-index:-1}Reasoning. The decoration moves backward inside its applicable stacking context. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: homework tracker. First, predict without running anything. Model a short list of assignments with subject, due date and completion state. Apply the chapter rule—negative values move positioned layers behind peers within the current context but do not guarantee placement behind every ancestor background. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The decoration moves backward inside its applicable stacking context. In the homework tracker setting, inspect the earliest point where sending an element to -9999 and losing it behind the wrong paint layer could occur. The safe procedure is: Use a minimal negative value and inspect ancestor backgrounds and contexts. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: library search. Next, isolate one variable and hold the others constant. Model book records with title, topic, shelf code and availability. Apply the chapter rule—negative values move positioned layers behind peers within the current context but do not guarantee placement behind every ancestor background. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The decoration moves backward inside its applicable stacking context. In the library search setting, inspect the earliest point where sending an element to -9999 and losing it behind the wrong paint layer could occur. The safe procedure is: Use a minimal negative value and inspect ancestor backgrounds and contexts. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: CCA sign-up. Now, test a boundary that a comfortable example would hide. Model activity rows with a name, weekday, capacity and registered pupils. Apply the chapter rule—negative values move positioned layers behind peers within the current context but do not guarantee placement behind every ancestor background. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The decoration moves backward inside its applicable stacking context. In the CCA sign-up setting, inspect the earliest point where sending an element to -9999 and losing it behind the wrong paint layer could occur. The safe procedure is: Use a minimal negative value and inspect ancestor backgrounds and contexts. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: revision planner. Then, explain the result to a study partner without using jargon as a substitute for cause. Model topics tagged by confidence, next review date and evidence. Apply the chapter rule—negative values move positioned layers behind peers within the current context but do not guarantee placement behind every ancestor background. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The decoration moves backward inside its applicable stacking context. In the revision planner setting, inspect the earliest point where sending an element to -9999 and losing it behind the wrong paint layer could occur. The safe procedure is: Use a minimal negative value and inspect ancestor backgrounds and contexts. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: canteen budget. Finally, transfer the rule to a new setting and state what would invalidate it. Model items with prices, quantities and a fixed spending limit. Apply the chapter rule—negative values move positioned layers behind peers within the current context but do not guarantee placement behind every ancestor background. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The decoration moves backward inside its applicable stacking context. In the canteen budget setting, inspect the earliest point where sending an element to -9999 and losing it behind the wrong paint layer could occur. The safe procedure is: Use a minimal negative value and inspect ancestor backgrounds and contexts. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers sending an element to -9999 and losing it behind the wrong paint layer.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny reading log example using pages, dates, unfamiliar words and a one-sentence reflection. Make one ordinary case, one boundary case and one case that exposes sending an element to -9999 and losing it behind the wrong paint layer. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: Negative values move positioned layers behind peers within the current context but do not guarantee placement behind every ancestor background. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why sending an element to -9999 and losing it behind the wrong paint layer is unsafe. The final explanation should conclude with this operational step: Use a minimal negative value and inspect ancestor backgrounds and contexts. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
overflow can clip an overlay even when stacking order is correct; clipping and stacking are separate axes of diagnosis. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is raising z-index to solve a clipped menu. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Inspect clipping ancestors before changing any layer number.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
.frame{overflow:hidden}Reasoning. A descendant outside the frame bounds is cut off regardless of z-index. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: revision planner. First, predict without running anything. Model topics tagged by confidence, next review date and evidence. Apply the chapter rule—overflow can clip an overlay even when stacking order is correct; clipping and stacking are separate axes of diagnosis. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A descendant outside the frame bounds is cut off regardless of z-index. In the revision planner setting, inspect the earliest point where raising z-index to solve a clipped menu could occur. The safe procedure is: Inspect clipping ancestors before changing any layer number. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: canteen budget. Next, isolate one variable and hold the others constant. Model items with prices, quantities and a fixed spending limit. Apply the chapter rule—overflow can clip an overlay even when stacking order is correct; clipping and stacking are separate axes of diagnosis. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A descendant outside the frame bounds is cut off regardless of z-index. In the canteen budget setting, inspect the earliest point where raising z-index to solve a clipped menu could occur. The safe procedure is: Inspect clipping ancestors before changing any layer number. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: weather journal. Now, test a boundary that a comfortable example would hide. Model daily observations with temperature, rain and a written note. Apply the chapter rule—overflow can clip an overlay even when stacking order is correct; clipping and stacking are separate axes of diagnosis. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A descendant outside the frame bounds is cut off regardless of z-index. In the weather journal setting, inspect the earliest point where raising z-index to solve a clipped menu could occur. The safe procedure is: Inspect clipping ancestors before changing any layer number. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: reading log. Then, explain the result to a study partner without using jargon as a substitute for cause. Model pages, dates, unfamiliar words and a one-sentence reflection. Apply the chapter rule—overflow can clip an overlay even when stacking order is correct; clipping and stacking are separate axes of diagnosis. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A descendant outside the frame bounds is cut off regardless of z-index. In the reading log setting, inspect the earliest point where raising z-index to solve a clipped menu could occur. The safe procedure is: Inspect clipping ancestors before changing any layer number. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: project board. Finally, transfer the rule to a new setting and state what would invalidate it. Model tasks moving among planned, doing, review and done states. Apply the chapter rule—overflow can clip an overlay even when stacking order is correct; clipping and stacking are separate axes of diagnosis. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A descendant outside the frame bounds is cut off regardless of z-index. In the project board setting, inspect the earliest point where raising z-index to solve a clipped menu could occur. The safe procedure is: Inspect clipping ancestors before changing any layer number. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers raising z-index to solve a clipped menu.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny project board example using tasks moving among planned, doing, review and done states. Make one ordinary case, one boundary case and one case that exposes raising z-index to solve a clipped menu. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: overflow can clip an overlay even when stacking order is correct; clipping and stacking are separate axes of diagnosis. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why raising z-index to solve a clipped menu is unsafe. The final explanation should conclude with this operational step: Inspect clipping ancestors before changing any layer number. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
fixed and sticky positioning can create contexts and interact with scroll containers and transforms. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is expecting fixed to always mean viewport-fixed and globally topmost. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Identify containing blocks, scroll containers and context creators.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
.header{position:sticky;top:0;z-index:10}Reasoning. The header has a clear scroll and layer role within its context. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: reading log. First, predict without running anything. Model pages, dates, unfamiliar words and a one-sentence reflection. Apply the chapter rule—fixed and sticky positioning can create contexts and interact with scroll containers and transforms. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The header has a clear scroll and layer role within its context. In the reading log setting, inspect the earliest point where expecting fixed to always mean viewport-fixed and globally topmost could occur. The safe procedure is: Identify containing blocks, scroll containers and context creators. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: project board. Next, isolate one variable and hold the others constant. Model tasks moving among planned, doing, review and done states. Apply the chapter rule—fixed and sticky positioning can create contexts and interact with scroll containers and transforms. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The header has a clear scroll and layer role within its context. In the project board setting, inspect the earliest point where expecting fixed to always mean viewport-fixed and globally topmost could occur. The safe procedure is: Identify containing blocks, scroll containers and context creators. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: homework tracker. Now, test a boundary that a comfortable example would hide. Model a short list of assignments with subject, due date and completion state. Apply the chapter rule—fixed and sticky positioning can create contexts and interact with scroll containers and transforms. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The header has a clear scroll and layer role within its context. In the homework tracker setting, inspect the earliest point where expecting fixed to always mean viewport-fixed and globally topmost could occur. The safe procedure is: Identify containing blocks, scroll containers and context creators. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: library search. Then, explain the result to a study partner without using jargon as a substitute for cause. Model book records with title, topic, shelf code and availability. Apply the chapter rule—fixed and sticky positioning can create contexts and interact with scroll containers and transforms. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The header has a clear scroll and layer role within its context. In the library search setting, inspect the earliest point where expecting fixed to always mean viewport-fixed and globally topmost could occur. The safe procedure is: Identify containing blocks, scroll containers and context creators. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: CCA sign-up. Finally, transfer the rule to a new setting and state what would invalidate it. Model activity rows with a name, weekday, capacity and registered pupils. Apply the chapter rule—fixed and sticky positioning can create contexts and interact with scroll containers and transforms. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The header has a clear scroll and layer role within its context. In the CCA sign-up setting, inspect the earliest point where expecting fixed to always mean viewport-fixed and globally topmost could occur. The safe procedure is: Identify containing blocks, scroll containers and context creators. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers expecting fixed to always mean viewport-fixed and globally topmost.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny homework tracker example using a short list of assignments with subject, due date and completion state. Make one ordinary case, one boundary case and one case that exposes expecting fixed to always mean viewport-fixed and globally topmost. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: fixed and sticky positioning can create contexts and interact with scroll containers and transforms. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why expecting fixed to always mean viewport-fixed and globally topmost is unsafe. The final explanation should conclude with this operational step: Identify containing blocks, scroll containers and context creators. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
Dialogs, popovers and fullscreen elements placed in the top layer sit outside ordinary document stacking comparisons. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is trying to beat a top-layer element with an enormous z-index. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Use the platform primitive when the interaction semantically requires top-layer behaviour.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
dialog.showModal()Reasoning. The modal dialog enters the top layer and ordinary z-index cannot outrank it. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: library search. First, predict without running anything. Model book records with title, topic, shelf code and availability. Apply the chapter rule—dialogs, popovers and fullscreen elements placed in the top layer sit outside ordinary document stacking comparisons. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The modal dialog enters the top layer and ordinary z-index cannot outrank it. In the library search setting, inspect the earliest point where trying to beat a top-layer element with an enormous z-index could occur. The safe procedure is: Use the platform primitive when the interaction semantically requires top-layer behaviour. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: CCA sign-up. Next, isolate one variable and hold the others constant. Model activity rows with a name, weekday, capacity and registered pupils. Apply the chapter rule—dialogs, popovers and fullscreen elements placed in the top layer sit outside ordinary document stacking comparisons. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The modal dialog enters the top layer and ordinary z-index cannot outrank it. In the CCA sign-up setting, inspect the earliest point where trying to beat a top-layer element with an enormous z-index could occur. The safe procedure is: Use the platform primitive when the interaction semantically requires top-layer behaviour. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: revision planner. Now, test a boundary that a comfortable example would hide. Model topics tagged by confidence, next review date and evidence. Apply the chapter rule—dialogs, popovers and fullscreen elements placed in the top layer sit outside ordinary document stacking comparisons. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The modal dialog enters the top layer and ordinary z-index cannot outrank it. In the revision planner setting, inspect the earliest point where trying to beat a top-layer element with an enormous z-index could occur. The safe procedure is: Use the platform primitive when the interaction semantically requires top-layer behaviour. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: canteen budget. Then, explain the result to a study partner without using jargon as a substitute for cause. Model items with prices, quantities and a fixed spending limit. Apply the chapter rule—dialogs, popovers and fullscreen elements placed in the top layer sit outside ordinary document stacking comparisons. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The modal dialog enters the top layer and ordinary z-index cannot outrank it. In the canteen budget setting, inspect the earliest point where trying to beat a top-layer element with an enormous z-index could occur. The safe procedure is: Use the platform primitive when the interaction semantically requires top-layer behaviour. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: weather journal. Finally, transfer the rule to a new setting and state what would invalidate it. Model daily observations with temperature, rain and a written note. Apply the chapter rule—dialogs, popovers and fullscreen elements placed in the top layer sit outside ordinary document stacking comparisons. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The modal dialog enters the top layer and ordinary z-index cannot outrank it. In the weather journal setting, inspect the earliest point where trying to beat a top-layer element with an enormous z-index could occur. The safe procedure is: Use the platform primitive when the interaction semantically requires top-layer behaviour. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers trying to beat a top-layer element with an enormous z-index.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny library search example using book records with title, topic, shelf code and availability. Make one ordinary case, one boundary case and one case that exposes trying to beat a top-layer element with an enormous z-index. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: Dialogs, popovers and fullscreen elements placed in the top layer sit outside ordinary document stacking comparisons. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why trying to beat a top-layer element with an enormous z-index is unsafe. The final explanation should conclude with this operational step: Use the platform primitive when the interaction semantically requires top-layer behaviour. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
A small named layer scale communicates roles such as base, dropdown, sticky and modal better than arbitrary escalating numbers. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is creating 99999 after every conflict. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Define tokens and keep them meaningful within declared boundaries.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
:root{--layer-base:0;--layer-menu:20;--layer-modal:40}Reasoning. Numbers become a documented system rather than a contest. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: canteen budget. First, predict without running anything. Model items with prices, quantities and a fixed spending limit. Apply the chapter rule—a small named layer scale communicates roles such as base, dropdown, sticky and modal better than arbitrary escalating numbers. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. Numbers become a documented system rather than a contest. In the canteen budget setting, inspect the earliest point where creating 99999 after every conflict could occur. The safe procedure is: Define tokens and keep them meaningful within declared boundaries. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: weather journal. Next, isolate one variable and hold the others constant. Model daily observations with temperature, rain and a written note. Apply the chapter rule—a small named layer scale communicates roles such as base, dropdown, sticky and modal better than arbitrary escalating numbers. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. Numbers become a documented system rather than a contest. In the weather journal setting, inspect the earliest point where creating 99999 after every conflict could occur. The safe procedure is: Define tokens and keep them meaningful within declared boundaries. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: reading log. Now, test a boundary that a comfortable example would hide. Model pages, dates, unfamiliar words and a one-sentence reflection. Apply the chapter rule—a small named layer scale communicates roles such as base, dropdown, sticky and modal better than arbitrary escalating numbers. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. Numbers become a documented system rather than a contest. In the reading log setting, inspect the earliest point where creating 99999 after every conflict could occur. The safe procedure is: Define tokens and keep them meaningful within declared boundaries. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: project board. Then, explain the result to a study partner without using jargon as a substitute for cause. Model tasks moving among planned, doing, review and done states. Apply the chapter rule—a small named layer scale communicates roles such as base, dropdown, sticky and modal better than arbitrary escalating numbers. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. Numbers become a documented system rather than a contest. In the project board setting, inspect the earliest point where creating 99999 after every conflict could occur. The safe procedure is: Define tokens and keep them meaningful within declared boundaries. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: homework tracker. Finally, transfer the rule to a new setting and state what would invalidate it. Model a short list of assignments with subject, due date and completion state. Apply the chapter rule—a small named layer scale communicates roles such as base, dropdown, sticky and modal better than arbitrary escalating numbers. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. Numbers become a documented system rather than a contest. In the homework tracker setting, inspect the earliest point where creating 99999 after every conflict could occur. The safe procedure is: Define tokens and keep them meaningful within declared boundaries. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers creating 99999 after every conflict.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny CCA sign-up example using activity rows with a name, weekday, capacity and registered pupils. Make one ordinary case, one boundary case and one case that exposes creating 99999 after every conflict. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: A small named layer scale communicates roles such as base, dropdown, sticky and modal better than arbitrary escalating numbers. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why creating 99999 after every conflict is unsafe. The final explanation should conclude with this operational step: Define tokens and keep them meaningful within declared boundaries. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
Rendering an overlay near a shared root can escape unwanted clipping or context boundaries, but ownership and focus must remain correct. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is moving markup to body and forgetting accessibility relationships. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Pair portal placement with focus, labelling and cleanup design.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
overlayRoot.append(popover)Reasoning. The overlay gains a different ancestor chain and therefore a different stacking context path. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: project board. First, predict without running anything. Model tasks moving among planned, doing, review and done states. Apply the chapter rule—rendering an overlay near a shared root can escape unwanted clipping or context boundaries, but ownership and focus must remain correct. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The overlay gains a different ancestor chain and therefore a different stacking context path. In the project board setting, inspect the earliest point where moving markup to body and forgetting accessibility relationships could occur. The safe procedure is: Pair portal placement with focus, labelling and cleanup design. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: homework tracker. Next, isolate one variable and hold the others constant. Model a short list of assignments with subject, due date and completion state. Apply the chapter rule—rendering an overlay near a shared root can escape unwanted clipping or context boundaries, but ownership and focus must remain correct. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The overlay gains a different ancestor chain and therefore a different stacking context path. In the homework tracker setting, inspect the earliest point where moving markup to body and forgetting accessibility relationships could occur. The safe procedure is: Pair portal placement with focus, labelling and cleanup design. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: library search. Now, test a boundary that a comfortable example would hide. Model book records with title, topic, shelf code and availability. Apply the chapter rule—rendering an overlay near a shared root can escape unwanted clipping or context boundaries, but ownership and focus must remain correct. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The overlay gains a different ancestor chain and therefore a different stacking context path. In the library search setting, inspect the earliest point where moving markup to body and forgetting accessibility relationships could occur. The safe procedure is: Pair portal placement with focus, labelling and cleanup design. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: CCA sign-up. Then, explain the result to a study partner without using jargon as a substitute for cause. Model activity rows with a name, weekday, capacity and registered pupils. Apply the chapter rule—rendering an overlay near a shared root can escape unwanted clipping or context boundaries, but ownership and focus must remain correct. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The overlay gains a different ancestor chain and therefore a different stacking context path. In the CCA sign-up setting, inspect the earliest point where moving markup to body and forgetting accessibility relationships could occur. The safe procedure is: Pair portal placement with focus, labelling and cleanup design. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: revision planner. Finally, transfer the rule to a new setting and state what would invalidate it. Model topics tagged by confidence, next review date and evidence. Apply the chapter rule—rendering an overlay near a shared root can escape unwanted clipping or context boundaries, but ownership and focus must remain correct. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The overlay gains a different ancestor chain and therefore a different stacking context path. In the revision planner setting, inspect the earliest point where moving markup to body and forgetting accessibility relationships could occur. The safe procedure is: Pair portal placement with focus, labelling and cleanup design. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers moving markup to body and forgetting accessibility relationships.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny revision planner example using topics tagged by confidence, next review date and evidence. Make one ordinary case, one boundary case and one case that exposes moving markup to body and forgetting accessibility relationships. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: Rendering an overlay near a shared root can escape unwanted clipping or context boundaries, but ownership and focus must remain correct. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why moving markup to body and forgetting accessibility relationships is unsafe. The final explanation should conclude with this operational step: Pair portal placement with focus, labelling and cleanup design. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
Computed styles and layout inspectors can reveal context triggers, containing blocks and clipping ancestors. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is editing live z-index values without recording the causal trigger. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Walk from each conflicting element to the root and note every context creator.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
getComputedStyle(node).zIndexReasoning. The number is evidence only when interpreted with position and ancestry. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: CCA sign-up. First, predict without running anything. Model activity rows with a name, weekday, capacity and registered pupils. Apply the chapter rule—computed styles and layout inspectors can reveal context triggers, containing blocks and clipping ancestors. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The number is evidence only when interpreted with position and ancestry. In the CCA sign-up setting, inspect the earliest point where editing live z-index values without recording the causal trigger could occur. The safe procedure is: Walk from each conflicting element to the root and note every context creator. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: revision planner. Next, isolate one variable and hold the others constant. Model topics tagged by confidence, next review date and evidence. Apply the chapter rule—computed styles and layout inspectors can reveal context triggers, containing blocks and clipping ancestors. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The number is evidence only when interpreted with position and ancestry. In the revision planner setting, inspect the earliest point where editing live z-index values without recording the causal trigger could occur. The safe procedure is: Walk from each conflicting element to the root and note every context creator. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: canteen budget. Now, test a boundary that a comfortable example would hide. Model items with prices, quantities and a fixed spending limit. Apply the chapter rule—computed styles and layout inspectors can reveal context triggers, containing blocks and clipping ancestors. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The number is evidence only when interpreted with position and ancestry. In the canteen budget setting, inspect the earliest point where editing live z-index values without recording the causal trigger could occur. The safe procedure is: Walk from each conflicting element to the root and note every context creator. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: weather journal. Then, explain the result to a study partner without using jargon as a substitute for cause. Model daily observations with temperature, rain and a written note. Apply the chapter rule—computed styles and layout inspectors can reveal context triggers, containing blocks and clipping ancestors. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The number is evidence only when interpreted with position and ancestry. In the weather journal setting, inspect the earliest point where editing live z-index values without recording the causal trigger could occur. The safe procedure is: Walk from each conflicting element to the root and note every context creator. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: reading log. Finally, transfer the rule to a new setting and state what would invalidate it. Model pages, dates, unfamiliar words and a one-sentence reflection. Apply the chapter rule—computed styles and layout inspectors can reveal context triggers, containing blocks and clipping ancestors. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The number is evidence only when interpreted with position and ancestry. In the reading log setting, inspect the earliest point where editing live z-index values without recording the causal trigger could occur. The safe procedure is: Walk from each conflicting element to the root and note every context creator. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers editing live z-index values without recording the causal trigger.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny canteen budget example using items with prices, quantities and a fixed spending limit. Make one ordinary case, one boundary case and one case that exposes editing live z-index values without recording the causal trigger. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: Computed styles and layout inspectors can reveal context triggers, containing blocks and clipping ancestors. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why editing live z-index values without recording the causal trigger is unsafe. The final explanation should conclude with this operational step: Walk from each conflicting element to the root and note every context creator. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
A media query can add transforms, position or opacity and thereby change the context tree only at one viewport size. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is debugging desktop while the failure occurs on a phone width. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Reproduce the exact viewport and compare computed context triggers.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
@media(max-width:700px){.nav{transform:translateX(0)}}Reasoning. The mobile rule creates a context absent on wider screens. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: weather journal. First, predict without running anything. Model daily observations with temperature, rain and a written note. Apply the chapter rule—a media query can add transforms, position or opacity and thereby change the context tree only at one viewport size. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The mobile rule creates a context absent on wider screens. In the weather journal setting, inspect the earliest point where debugging desktop while the failure occurs on a phone width could occur. The safe procedure is: Reproduce the exact viewport and compare computed context triggers. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: reading log. Next, isolate one variable and hold the others constant. Model pages, dates, unfamiliar words and a one-sentence reflection. Apply the chapter rule—a media query can add transforms, position or opacity and thereby change the context tree only at one viewport size. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The mobile rule creates a context absent on wider screens. In the reading log setting, inspect the earliest point where debugging desktop while the failure occurs on a phone width could occur. The safe procedure is: Reproduce the exact viewport and compare computed context triggers. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: project board. Now, test a boundary that a comfortable example would hide. Model tasks moving among planned, doing, review and done states. Apply the chapter rule—a media query can add transforms, position or opacity and thereby change the context tree only at one viewport size. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The mobile rule creates a context absent on wider screens. In the project board setting, inspect the earliest point where debugging desktop while the failure occurs on a phone width could occur. The safe procedure is: Reproduce the exact viewport and compare computed context triggers. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: homework tracker. Then, explain the result to a study partner without using jargon as a substitute for cause. Model a short list of assignments with subject, due date and completion state. Apply the chapter rule—a media query can add transforms, position or opacity and thereby change the context tree only at one viewport size. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The mobile rule creates a context absent on wider screens. In the homework tracker setting, inspect the earliest point where debugging desktop while the failure occurs on a phone width could occur. The safe procedure is: Reproduce the exact viewport and compare computed context triggers. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: library search. Finally, transfer the rule to a new setting and state what would invalidate it. Model book records with title, topic, shelf code and availability. Apply the chapter rule—a media query can add transforms, position or opacity and thereby change the context tree only at one viewport size. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The mobile rule creates a context absent on wider screens. In the library search setting, inspect the earliest point where debugging desktop while the failure occurs on a phone width could occur. The safe procedure is: Reproduce the exact viewport and compare computed context triggers. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers debugging desktop while the failure occurs on a phone width.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny weather journal example using daily observations with temperature, rain and a written note. Make one ordinary case, one boundary case and one case that exposes debugging desktop while the failure occurs on a phone width. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: A media query can add transforms, position or opacity and thereby change the context tree only at one viewport size. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why debugging desktop while the failure occurs on a phone width is unsafe. The final explanation should conclude with this operational step: Reproduce the exact viewport and compare computed context triggers. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
A visually top element must not leave hidden background controls focusable or clickable during a modal interaction. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is treating correct pixels as a complete modal solution. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Test tab order, escape, inert background and visible focus.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
main.inert=trueReasoning. Interaction containment complements visual stacking. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: homework tracker. First, predict without running anything. Model a short list of assignments with subject, due date and completion state. Apply the chapter rule—a visually top element must not leave hidden background controls focusable or clickable during a modal interaction. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. Interaction containment complements visual stacking. In the homework tracker setting, inspect the earliest point where treating correct pixels as a complete modal solution could occur. The safe procedure is: Test tab order, escape, inert background and visible focus. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: library search. Next, isolate one variable and hold the others constant. Model book records with title, topic, shelf code and availability. Apply the chapter rule—a visually top element must not leave hidden background controls focusable or clickable during a modal interaction. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. Interaction containment complements visual stacking. In the library search setting, inspect the earliest point where treating correct pixels as a complete modal solution could occur. The safe procedure is: Test tab order, escape, inert background and visible focus. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: CCA sign-up. Now, test a boundary that a comfortable example would hide. Model activity rows with a name, weekday, capacity and registered pupils. Apply the chapter rule—a visually top element must not leave hidden background controls focusable or clickable during a modal interaction. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. Interaction containment complements visual stacking. In the CCA sign-up setting, inspect the earliest point where treating correct pixels as a complete modal solution could occur. The safe procedure is: Test tab order, escape, inert background and visible focus. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: revision planner. Then, explain the result to a study partner without using jargon as a substitute for cause. Model topics tagged by confidence, next review date and evidence. Apply the chapter rule—a visually top element must not leave hidden background controls focusable or clickable during a modal interaction. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. Interaction containment complements visual stacking. In the revision planner setting, inspect the earliest point where treating correct pixels as a complete modal solution could occur. The safe procedure is: Test tab order, escape, inert background and visible focus. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: canteen budget. Finally, transfer the rule to a new setting and state what would invalidate it. Model items with prices, quantities and a fixed spending limit. Apply the chapter rule—a visually top element must not leave hidden background controls focusable or clickable during a modal interaction. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. Interaction containment complements visual stacking. In the canteen budget setting, inspect the earliest point where treating correct pixels as a complete modal solution could occur. The safe procedure is: Test tab order, escape, inert background and visible focus. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers treating correct pixels as a complete modal solution.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny reading log example using pages, dates, unfamiliar words and a one-sentence reflection. Make one ordinary case, one boundary case and one case that exposes treating correct pixels as a complete modal solution. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: A visually top element must not leave hidden background controls focusable or clickable during a modal interaction. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why treating correct pixels as a complete modal solution is unsafe. The final explanation should conclude with this operational step: Test tab order, escape, inert background and visible focus. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
Visual regression and interaction tests should cover overlap states, not only resting screenshots. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is testing a closed menu but never its open collision. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Create fixtures for dropdown over cards, sticky header over content and modal over all.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
await expect(menu).toBeVisible()Reasoning. The test should also verify it is not clipped or covered at target viewports. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: revision planner. First, predict without running anything. Model topics tagged by confidence, next review date and evidence. Apply the chapter rule—visual regression and interaction tests should cover overlap states, not only resting screenshots. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The test should also verify it is not clipped or covered at target viewports. In the revision planner setting, inspect the earliest point where testing a closed menu but never its open collision could occur. The safe procedure is: Create fixtures for dropdown over cards, sticky header over content and modal over all. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: canteen budget. Next, isolate one variable and hold the others constant. Model items with prices, quantities and a fixed spending limit. Apply the chapter rule—visual regression and interaction tests should cover overlap states, not only resting screenshots. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The test should also verify it is not clipped or covered at target viewports. In the canteen budget setting, inspect the earliest point where testing a closed menu but never its open collision could occur. The safe procedure is: Create fixtures for dropdown over cards, sticky header over content and modal over all. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: weather journal. Now, test a boundary that a comfortable example would hide. Model daily observations with temperature, rain and a written note. Apply the chapter rule—visual regression and interaction tests should cover overlap states, not only resting screenshots. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The test should also verify it is not clipped or covered at target viewports. In the weather journal setting, inspect the earliest point where testing a closed menu but never its open collision could occur. The safe procedure is: Create fixtures for dropdown over cards, sticky header over content and modal over all. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: reading log. Then, explain the result to a study partner without using jargon as a substitute for cause. Model pages, dates, unfamiliar words and a one-sentence reflection. Apply the chapter rule—visual regression and interaction tests should cover overlap states, not only resting screenshots. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The test should also verify it is not clipped or covered at target viewports. In the reading log setting, inspect the earliest point where testing a closed menu but never its open collision could occur. The safe procedure is: Create fixtures for dropdown over cards, sticky header over content and modal over all. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: project board. Finally, transfer the rule to a new setting and state what would invalidate it. Model tasks moving among planned, doing, review and done states. Apply the chapter rule—visual regression and interaction tests should cover overlap states, not only resting screenshots. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The test should also verify it is not clipped or covered at target viewports. In the project board setting, inspect the earliest point where testing a closed menu but never its open collision could occur. The safe procedure is: Create fixtures for dropdown over cards, sticky header over content and modal over all. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers testing a closed menu but never its open collision.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny project board example using tasks moving among planned, doing, review and done states. Make one ordinary case, one boundary case and one case that exposes testing a closed menu but never its open collision. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: Visual regression and interaction tests should cover overlap states, not only resting screenshots. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why testing a closed menu but never its open collision is unsafe. The final explanation should conclude with this operational step: Create fixtures for dropdown over cards, sticky header over content and modal over all. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
A fast route checks top layer, clipping, context ancestry, sibling order and only then z-index values. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is changing several declarations at once. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Make one hypothesis and one reversible change per step.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
/* temporarily remove transform from ancestor */Reasoning. A controlled removal confirms whether that ancestor created the harmful boundary. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: reading log. First, predict without running anything. Model pages, dates, unfamiliar words and a one-sentence reflection. Apply the chapter rule—a fast route checks top layer, clipping, context ancestry, sibling order and only then z-index values. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A controlled removal confirms whether that ancestor created the harmful boundary. In the reading log setting, inspect the earliest point where changing several declarations at once could occur. The safe procedure is: Make one hypothesis and one reversible change per step. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: project board. Next, isolate one variable and hold the others constant. Model tasks moving among planned, doing, review and done states. Apply the chapter rule—a fast route checks top layer, clipping, context ancestry, sibling order and only then z-index values. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A controlled removal confirms whether that ancestor created the harmful boundary. In the project board setting, inspect the earliest point where changing several declarations at once could occur. The safe procedure is: Make one hypothesis and one reversible change per step. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: homework tracker. Now, test a boundary that a comfortable example would hide. Model a short list of assignments with subject, due date and completion state. Apply the chapter rule—a fast route checks top layer, clipping, context ancestry, sibling order and only then z-index values. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A controlled removal confirms whether that ancestor created the harmful boundary. In the homework tracker setting, inspect the earliest point where changing several declarations at once could occur. The safe procedure is: Make one hypothesis and one reversible change per step. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: library search. Then, explain the result to a study partner without using jargon as a substitute for cause. Model book records with title, topic, shelf code and availability. Apply the chapter rule—a fast route checks top layer, clipping, context ancestry, sibling order and only then z-index values. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A controlled removal confirms whether that ancestor created the harmful boundary. In the library search setting, inspect the earliest point where changing several declarations at once could occur. The safe procedure is: Make one hypothesis and one reversible change per step. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: CCA sign-up. Finally, transfer the rule to a new setting and state what would invalidate it. Model activity rows with a name, weekday, capacity and registered pupils. Apply the chapter rule—a fast route checks top layer, clipping, context ancestry, sibling order and only then z-index values. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. A controlled removal confirms whether that ancestor created the harmful boundary. In the CCA sign-up setting, inspect the earliest point where changing several declarations at once could occur. The safe procedure is: Make one hypothesis and one reversible change per step. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers changing several declarations at once.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny homework tracker example using a short list of assignments with subject, due date and completion state. Make one ordinary case, one boundary case and one case that exposes changing several declarations at once. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: A fast route checks top layer, clipping, context ancestry, sibling order and only then z-index values. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why changing several declarations at once is unsafe. The final explanation should conclude with this operational step: Make one hypothesis and one reversible change per step. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
Mastery means designing predictable component boundaries and using the smallest layer vocabulary that explains every overlap. This is the chapter’s governing idea. A learner should be able to restate it in ordinary language, point to the relevant state in an example, and predict the consequence of one controlled change. Those three actions distinguish a working mental model from a phrase copied from a reference page.
The common trap is memorising a list of magic context triggers without modelling ancestry. That error is informative: it shows which boundary the learner has not yet represented. Correct the earliest wrong assumption, not merely the final line. Explain a real page as a context tree and predict a new overlay before opening the browser.
For a short Punggol home session, use a prediction–observation–explanation cycle. Write the prediction before using the interpreter, browser or terminal. Record the observation exactly. Then write one causal sentence containing “because”. If the sentence only repeats the output, shrink the case until every transition can be named.
Core worked example
.app{isolation:isolate}Reasoning. The declaration is useful only when it supports an intentional page-level layer contract. The important check is not whether the final output looks plausible. Identify the input state, the rule applied, the boundary at which the rule takes effect, and the evidence that would expose a different rule. Then change one part of the example and predict again.
Five deliberate variations
Variation 1: library search. First, predict without running anything. Model book records with title, topic, shelf code and availability. Apply the chapter rule—mastery means designing predictable component boundaries and using the smallest layer vocabulary that explains every overlap. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The declaration is useful only when it supports an intentional page-level layer contract. In the library search setting, inspect the earliest point where memorising a list of magic context triggers without modelling ancestry could occur. The safe procedure is: Explain a real page as a context tree and predict a new overlay before opening the browser. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 2: CCA sign-up. Next, isolate one variable and hold the others constant. Model activity rows with a name, weekday, capacity and registered pupils. Apply the chapter rule—mastery means designing predictable component boundaries and using the smallest layer vocabulary that explains every overlap. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The declaration is useful only when it supports an intentional page-level layer contract. In the CCA sign-up setting, inspect the earliest point where memorising a list of magic context triggers without modelling ancestry could occur. The safe procedure is: Explain a real page as a context tree and predict a new overlay before opening the browser. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 3: revision planner. Now, test a boundary that a comfortable example would hide. Model topics tagged by confidence, next review date and evidence. Apply the chapter rule—mastery means designing predictable component boundaries and using the smallest layer vocabulary that explains every overlap. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The declaration is useful only when it supports an intentional page-level layer contract. In the revision planner setting, inspect the earliest point where memorising a list of magic context triggers without modelling ancestry could occur. The safe procedure is: Explain a real page as a context tree and predict a new overlay before opening the browser. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 4: canteen budget. Then, explain the result to a study partner without using jargon as a substitute for cause. Model items with prices, quantities and a fixed spending limit. Apply the chapter rule—mastery means designing predictable component boundaries and using the smallest layer vocabulary that explains every overlap. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The declaration is useful only when it supports an intentional page-level layer contract. In the canteen budget setting, inspect the earliest point where memorising a list of magic context triggers without modelling ancestry could occur. The safe procedure is: Explain a real page as a context tree and predict a new overlay before opening the browser. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Variation 5: weather journal. Finally, transfer the rule to a new setting and state what would invalidate it. Model daily observations with temperature, rain and a written note. Apply the chapter rule—mastery means designing predictable component boundaries and using the smallest layer vocabulary that explains every overlap. Before using a tool, state what remains unchanged, what is being varied, and which visible result would disprove the prediction.
Explained answer. Begin from the rule, not from a guessed output. The declaration is useful only when it supports an intentional page-level layer contract. In the weather journal setting, inspect the earliest point where memorising a list of magic context triggers without modelling ancestry could occur. The safe procedure is: Explain a real page as a context tree and predict a new overlay before opening the browser. If the data contains an empty value, a duplicate identity, a nested control, an unexpected ancestor or an unavailable path, pause and decide whether the chapter’s default policy still applies. This makes the exercise a transfer test rather than a cosmetic renaming of variables.
Diagnostic route
- If the vocabulary is unclear: ask the learner to point to the concrete element represented by each noun in the rule.
- If the prediction is wrong: find the first state where the written trace differs from the observed trace.
- If the output is right but the explanation is weak: introduce one near-miss that triggers memorising a list of magic context triggers without modelling ancestry.
- If the example is easy: transfer it to a second context and require the learner to name the invariant.
- If the tool behaves differently: consult the linked official documentation and record the relevant version or environment.
A parent does not need to supply the technical answer. Ask: “What did you expect?”, “What evidence changed your mind?”, and “What is the smallest example that keeps the problem?” Those questions protect learner ownership while still making an evening practice session structured and calm.
Practice with an explained answer
Question. Design a tiny library search example using book records with title, topic, shelf code and availability. Make one ordinary case, one boundary case and one case that exposes memorising a list of magic context triggers without modelling ancestry. Predict all three, run or inspect them, and state whether the governing idea needs qualification.
Answer guide. A strong response names the chapter rule first: Mastery means designing predictable component boundaries and using the smallest layer vocabulary that explains every overlap. It then shows three separate traces, not just three final outputs. The boundary case must sit exactly on a threshold or ownership edge. The near-miss must demonstrate why memorising a list of magic context triggers without modelling ancestry is unsafe. The final explanation should conclude with this operational step: Explain a real page as a context tree and predict a new overlay before opening the browser. Different data values are acceptable when the reasoning and evidence remain consistent.
Transfer and decision point
Transfer this chapter to an unfamiliar project by separating mechanism from policy. The mechanism is what the language, browser or Git command does. The policy is what this project intends to preserve. When those are blended, a technically valid operation can still be educationally or operationally wrong. Write both statements, choose a reversible test, and keep important work backed up.
Previous chapter . Contents . Next chapter
Parent guide: deciding the next useful step
Start with evidence, not labels such as careless or weak. Ask the learner to predict one small case, then compare the prediction with the observed trace. A mismatch at the first step suggests the mental model needs rebuilding. A correct model with syntax errors calls for focused reference use. Correct routine cases but weak boundary cases call for deliberate variation. Correct explanations across new contexts indicate readiness for a project.
A useful weekly record has four short fields: concept attempted, prediction, observed difference and next test. It should not become a surveillance log. Its purpose is to make progress visible and help the learner choose the next task. Stop a session when fatigue replaces reasoning; return with a smaller case rather than adding pressure.
Seek specialised help when a learner repeatedly cannot connect cause and effect despite smaller examples, when accessibility or safety implications are unclear, or when important repository or project data may be at risk. The right help should make thinking more visible and independent, not create dependence on a hidden answer.
Capstone practice with explained routes
1. homework tracker: plan, predict and verify
Build a small homework tracker using a short list of assignments with subject, due date and completion state. Apply “The stacking-context mental model” and one later chapter of your choice. Include an ordinary case, a boundary, a deliberate failure and a recovery. Before using a tool, write the expected state after each important step.
Explained route. Begin with this rule: A stacking context is an independent three-dimensional ordering boundary whose descendants are compared internally before the whole context is placed among siblings. Use the procedure “Draw a tree and circle every element that creates a context.” for the first pass. Then choose a second chapter whose boundary could change the decision. A complete answer contains the initial model, a trace, observed evidence, a correction if necessary, and one sentence explaining how the result would change in a different environment. The precise data may vary; the causal chain must be checkable.
2. library search: plan, predict and verify
Build a small library search using book records with title, topic, shelf code and availability. Apply “Nested contexts are atomic” and one later chapter of your choice. Include an ordinary case, a boundary, a deliberate failure and a recovery. Before using a tool, write the expected state after each important step.
Explained route. Begin with this rule: A child with z-index 9999 cannot escape a parent context that sits below a sibling context. Use the procedure “Compare the parents first; fix the boundary or move the overlay to an appropriate owner.” for the first pass. Then choose a second chapter whose boundary could change the decision. A complete answer contains the initial model, a trace, observed evidence, a correction if necessary, and one sentence explaining how the result would change in a different environment. The precise data may vary; the causal chain must be checkable.
3. CCA sign-up: plan, predict and verify
Build a small CCA sign-up using activity rows with a name, weekday, capacity and registered pupils. Apply “Transform and related effects” and one later chapter of your choice. Include an ordinary case, a boundary, a deliberate failure and a recovery. Before using a tool, write the expected state after each important step.
Explained route. Begin with this rule: transform, filter, perspective and several visual effects create stacking contexts even when the visual change seems harmless. Use the procedure “Remove experimental transforms and verify the context tree before optimising.” for the first pass. Then choose a second chapter whose boundary could change the decision. A complete answer contains the initial model, a trace, observed evidence, a correction if necessary, and one sentence explaining how the result would change in a different environment. The precise data may vary; the causal chain must be checkable.
4. revision planner: plan, predict and verify
Build a small revision planner using topics tagged by confidence, next review date and evidence. Apply “Overflow and clipping” and one later chapter of your choice. Include an ordinary case, a boundary, a deliberate failure and a recovery. Before using a tool, write the expected state after each important step.
Explained route. Begin with this rule: overflow can clip an overlay even when stacking order is correct; clipping and stacking are separate axes of diagnosis. Use the procedure “Inspect clipping ancestors before changing any layer number.” for the first pass. Then choose a second chapter whose boundary could change the decision. A complete answer contains the initial model, a trace, observed evidence, a correction if necessary, and one sentence explaining how the result would change in a different environment. The precise data may vary; the causal chain must be checkable.
5. canteen budget: plan, predict and verify
Build a small canteen budget using items with prices, quantities and a fixed spending limit. Apply “Component layer tokens” and one later chapter of your choice. Include an ordinary case, a boundary, a deliberate failure and a recovery. Before using a tool, write the expected state after each important step.
Explained route. Begin with this rule: A small named layer scale communicates roles such as base, dropdown, sticky and modal better than arbitrary escalating numbers. Use the procedure “Define tokens and keep them meaningful within declared boundaries.” for the first pass. Then choose a second chapter whose boundary could change the decision. A complete answer contains the initial model, a trace, observed evidence, a correction if necessary, and one sentence explaining how the result would change in a different environment. The precise data may vary; the causal chain must be checkable.
6. weather journal: plan, predict and verify
Build a small weather journal using daily observations with temperature, rain and a written note. Apply “Responsive layering” and one later chapter of your choice. Include an ordinary case, a boundary, a deliberate failure and a recovery. Before using a tool, write the expected state after each important step.
Explained route. Begin with this rule: A media query can add transforms, position or opacity and thereby change the context tree only at one viewport size. Use the procedure “Reproduce the exact viewport and compare computed context triggers.” for the first pass. Then choose a second chapter whose boundary could change the decision. A complete answer contains the initial model, a trace, observed evidence, a correction if necessary, and one sentence explaining how the result would change in a different environment. The precise data may vary; the causal chain must be checkable.
7. reading log: plan, predict and verify
Build a small reading log using pages, dates, unfamiliar words and a one-sentence reflection. Apply “Debugging decision tree” and one later chapter of your choice. Include an ordinary case, a boundary, a deliberate failure and a recovery. Before using a tool, write the expected state after each important step.
Explained route. Begin with this rule: A fast route checks top layer, clipping, context ancestry, sibling order and only then z-index values. Use the procedure “Make one hypothesis and one reversible change per step.” for the first pass. Then choose a second chapter whose boundary could change the decision. A complete answer contains the initial model, a trace, observed evidence, a correction if necessary, and one sentence explaining how the result would change in a different environment. The precise data may vary; the causal chain must be checkable.
8. project board: plan, predict and verify
Build a small project board using tasks moving among planned, doing, review and done states. Apply “Normal paint order” and one later chapter of your choice. Include an ordinary case, a boundary, a deliberate failure and a recovery. Before using a tool, write the expected state after each important step.
Explained route. Begin with this rule: Without special stacking, backgrounds, in-flow content and positioned content follow defined painting rules and document order resolves many ties. Use the procedure “Remove z-index temporarily and inspect which later sibling paints on top.” for the first pass. Then choose a second chapter whose boundary could change the decision. A complete answer contains the initial model, a trace, observed evidence, a correction if necessary, and one sentence explaining how the result would change in a different environment. The precise data may vary; the causal chain must be checkable.
Frequently asked questions
How long should one practice session be?
Long enough to complete one prediction–observation–explanation cycle while attention remains good. Ten to twenty focused minutes can be productive; stop before the work becomes mechanical.
Should a learner memorise every rule first?
No. Keep a small set of governing ideas available, then practise retrieving and applying them. Reference use is part of real technical work, but the learner must still explain the result.
What if the example works but the learner cannot explain it?
Treat that as an incomplete success. Ask for a trace, change one boundary and compare. Reliable understanding survives a controlled variation.
Is the shortest solution the best solution?
Not automatically. Prefer the solution whose policy, failure modes and maintenance cost are easiest to justify for the actual reader and project.
When should official documentation be used?
Use it when syntax, event behaviour, CSS triggers, Git options or version details matter. Tutorials can orient; the primary reference settles the contract.
How can a parent help without knowing the subject?
Ask evidence questions: What did you predict? Which step differed? What is the smallest reproduction? What will you test next?
How do we know the skill transfers?
Give a new context with different names and one unfamiliar boundary. Ask the learner to identify the invariant before writing code or running a command.
What should be saved from the lesson?
Save a brief trace, the corrected rule, one boundary example and a next-step question. Avoid keeping pages of copied output with no explanation.
Can this guide replace project backups?
No. Use disposable examples and proper backups. Learning exercises should not place important schoolwork, repositories or personal data at risk.
What counts as mastery?
The learner can predict, verify, diagnose, recover and justify a choice across more than one context, while knowing when to consult the current official reference.
