Phase 7 — Allowed

This file is the gauge for everything in phase7/. Phase 7 builds on every tool allowed through Phase 6.

Learning goal

Position elements deliberately, preserve normal flow when appropriate, and control simple overlapping layers.

Everything from ./phase6-allowed.html remains available.

static is the default and ignores top, right, bottom, and left.
relative keeps its original space in normal flow, then offsets the rendered box.
A positioned element can establish the containing block for an absolutely positioned descendant.
absolute leaves normal flow; reserve space when other content must not move underneath it.
fixed is normally positioned relative to the viewport and can cover content while scrolling.
sticky behaves like normal flow until an offset threshold such as top: 0 is reached.
Ancestor overflow can change or prevent the expected sticky behavior.
Source order controls which overlapping element paints later when no z-index changes the order.
Use z-index only when overlap is intentional, and prefer a small documented scale.
A z-index cannot escape its ancestor stacking context; avoid teaching large arbitrary numbers as a fix.

JavaScript
inset shorthand
Transforms, opacity-based layering, and other advanced stacking-context demonstrations
Any HTML tag or CSS property not inherited or listed above
Media queries and inline styles