36 lines
714 B
Markdown
36 lines
714 B
Markdown
---
|
|
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)` |
|