loophole.dev

// overflow: visible — container boundary violated
z: 1

Legal Loopholes

A provision in the statute that permits circumvention of the statute's own intent. The letter of the law against the spirit of the law. Every rule system generates its own exploits -- the more precise the language, the more exploitable the gaps between clauses. Tax codes, building regulations, terms of service: all contain passages that, read in a specific sequence, authorize exactly what they were written to prevent.

z: 2

Logical Loopholes

Self-reference creates paradox. "This statement is unprovable" -- if true, the system is incomplete; if false, the system is inconsistent. Godel found the loophole in formal mathematics itself. Every sufficiently powerful logical system contains propositions it can express but cannot resolve. The loophole is not a bug. It is the architecture.

z: 3

Structural Loopholes

The gap between what a container promises and what its content delivers. A div with overflow: visible has made a commitment it cannot enforce. The border says "this is my boundary." The content says "I disagree." The browser renders both statements simultaneously, and the visitor sees the contradiction as layout. Every CSS property is a rule. Every rule has an edge case. Every edge case is a loophole.

// grid-column overlap — three elements sharing row space

The Escape Corridor

This paragraph is fully contained. It respects its boundaries. The border defines the box, and the text remains within the box. This is how layout is supposed to work. Rules are followed. Expectations are met. The container holds.

This paragraph begins to test the boundary. The text still reads left to right, still breaks at word boundaries, still follows the baseline grid. But the right edge of the last line extends beyond the container's padding box. The content has found a gap.

Two lines now escape their designated area. The negative margin pulls text into space the container did not allocate. The border still appears at its original position -- it does not know its content has left. The container's lie is now visible.

The escape accelerates. Three lines of text extend past the boundary, and the visual gap between the content's right edge and the container's right border is unmistakable. The paragraph has migrated. It occupies space it was never given.

The corridor is complete. The text has walked sixty pixels to the right of its container. The border sits abandoned at the original position, framing empty space. The content is elsewhere. The loophole in the box model: overflow visible means the container cannot enforce its own dimensions.

// margin-right: -20px to -80px — exploiting box model

The Stack Collapse

z: -1

This title should be in front

z: 99

Body text that obscures its own heading. The z-index says 99 but the stacking context says this element was created after the title card. Position: relative on both elements creates competing stacking contexts. The browser resolves the conflict by rendering the higher z-index on top -- even when the visual hierarchy demands the opposite.

z: 50
z: 1

This block should be behind everything, but its z-index of 1 and relative positioning place it into the same stacking context as elements that expect to be on top.

// z-index collision — stacking context violation

The Patch

Order restored. Containers contain. Borders bound. Z-indexes stack correctly. The layout rules are enforced again. Every element sits within its grid cell, every text block respects its padding box, every stacking context resolves as the specification intends.

This is how the page should have looked from the beginning. Clean margins. Consistent spacing. Predictable rendering across viewports. The CSS is valid, the HTML is semantic, the cascade resolves without conflict.

The system is patched. All loopholes closed. All edge cases handled. Mostly.

// WONTFIX: known edge case