Superposición con ZStack
Superponga las vistas de atrás hacia delante para crear profundidad.
Superposición con ZStack es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de SwiftUI Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de SwiftUI Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Stacking in Depth
VStack goes down and HStack goes across, but sometimes you want views to overlap. That calls for a stack that works in depth. 🧱
Meet ZStack
A ZStack layers its children back to front, like sheets of glass piled on top of each other. Later views sit above earlier ones.
Your First ZStack
Inside a ZStack, the first child is the back layer and the last child is the front. Here the text sits on top of the colored background.
ZStack {
Color.blue
Text("On top")
}Back to Front Order
The drawing rule is simple: earlier children are behind, later children are in front. The last view you write wins the top spot.
Backgrounds Made Easy
A ZStack is a natural way to put a color or image behind your content. Drop a Color first, then layer your views on top of it.
Centered Overlap
By default a ZStack centers every child over the same point, so layers share one middle. You change this with an alignment argument.
ZStack(alignment: .topLeading) {
Color.gray
Text("Corner")
}Badges on Icons
A common ZStack pattern is a badge floating over an icon, like an unread count perched on the corner of a bell.
Sizing the ZStack
A ZStack takes the size of its largest child. A tiny label over a big image gives the stack the image's full footprint.
Cards with Overlays
Layer a gradient and a title over a photo to make a card. ZStack lets text stay readable on top of any background image.
ZStack {
Image("cover")
Text("Caption")
}ZStack Is a View
Like the other stacks, a ZStack is one view, so padding, frame, or background modifiers apply to the whole layered group together.
When to Reach for ZStack
Use a ZStack whenever views must overlap: a background behind content, a watermark, a badge, or text floating over an image.
Quick Check
Let's test your grasp of ZStack layering.
Recap: Layering Views
Awesome! A ZStack layers children back to front, centers them by default, and is your tool for backgrounds, badges, and overlapping cards. ✨
Preguntas frecuentes
¿La lección «Superposición con ZStack» es gratis?
Sí — el texto completo de «Superposición con ZStack» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de SwiftUI Academy, actualiza a CoddyKit PRO. El curso de SwiftUI Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Superposición con ZStack»?
Superponga las vistas de atrás hacia delante para crear profundidad. Practicas SwiftUI Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar SwiftUI Academy?
No se requiere experiencia previa. SwiftUI Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Superposición con ZStack»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de SwiftUI Academy?
Sí. Cada lección de SwiftUI Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Apilado vertical de vistas
- Filas con HStack
- Superposición con ZStack
- Espaciado y alineación en pilas