Initial commit: 79+ design patterns, LLM prompts, and assets

layout/overlapping-layers.md

@@ -0,0 +1,35 @@
+---
+name: layout/overlapping-layers
+title: Overlapping Elements
+description: Elements that overlap to create depth and visual interest.
+tags: [layout, overlapping, depth, premium]
+source: amppz.com, brad.co, stripe.com, linear.app
+---
+
+# Overlapping Elements
+
+## CSS
+
+```css
+.overlapping-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+.image-card {
+  grid-column: span 6;
+  z-index: 1;
+}
+.text-card {
+  grid-column: 7 / span 6;
+  margin-top: -60px;
+  z-index: 2;
+}
+```
+
+## Anti-patterns
+
+| ❌ Плохо | ✅ Хорошо |
+|----------|-----------|
+| Без `z-index` | `z-index: 1/2` |
+| `margin-top: -200px` | `margin-top: -30px` |
+| Без mobile fallback | `@media (max-width: 768px)` |