agent-skills/sn-infographic/references/layouts/overlapping.md

overlapping

Text and images overlap, blurring foreground and background relationships.

Structure

• Elements layered on top of each other with intentional overlap
• Depth created through z-order, opacity, and shadow
• Overlapping creates visual richness and complexity
• Key elements remain legible despite overlap

Best For

• Rich, layered editorial designs
• Collage-style compositions
• Content showing interconnection or integration
• Visually complex artistic presentations

Visual Elements

• Multiple overlapping layers
• Drop shadows and opacity variations
• Clear z-order hierarchy
• Clipping masks or blend modes for integration

Text Placement

• Text in the most legible layer
• Avoid placing critical text under opaque elements
• Title in a clear, non-overlapping zone

Recommended Pairings

• glitch-art: Torn paper overlapping layers
• storybook-watercolor: Painterly overlapping elements
• high-contrast-ad: High-contrast overlapping shapes