---
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)` |