wow-design-wiki/layout/overlapping-layers.md

name, title, description, tags, source

name	title	description	tags	source
layout/overlapping-layers	Overlapping Elements	Elements that overlap to create depth and visual interest.	layout overlapping depth premium	amppz.com, brad.co, stripe.com, linear.app

Overlapping Elements

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)