This example demonstrates how CSS stacking contexts determine the paint order of overlapping positioned elements. Three colored squares—red, green, and blue—are absolutely positioned within separate parent divs, yet their visual layering follows the order of the divs in the DOM. The code uses plain CSS positioning (top/left offsets) and background colors, with no JavaScript or external libraries. A commented-out universal selector block shows a debugging technique for visualizing layout boxes, but the active CSS keeps the example minimal. The illustration clarifies that without explicit z-index, later siblings paint above earlier ones, as seen in the stacked arrangement.