Teoría
Teoría

z-index: qué elemento queda encima

Cuando varios bloques con posicionamiento absoluto ocupan el mismo lugar de la página, se superponen. De forma predeterminada, el bloque que aparece más adelante en el código queda encima.

La propiedad CSS z-index permite controlar cómo se superponen los bloques. Su valor puede ser un número entero. En este ejemplo, el bloque con el mayor z-index quedará encima de los demás.

La propiedad z-index funciona con los elementos cuyo position es absolute, fixed o relative. Así, un elemento con posicionamiento relativo puede quedar encima de uno con posicionamiento absoluto.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>z-index: qué elemento queda encima</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block block-1">Bloque 1</div> <div class="block block-2">Bloque 2</div> <div class="block block-3">Bloque 3</div> </body> </html>

CSS

body { margin: 0; padding: 20px; } .block { padding: 10px; text-align: right; color: white; opacity: 0.8; } .block-1 { width: 350px; height: 350px; background-color: #3a78a1; } .block-2 { position: absolute; top: 20px; width: 250px; height: 250px; background-color: #e74c3c; } .block-3 { position: absolute; top: 20px; width: 150px; height: 150px; background-color: #27ae60; }

ObjetivosRealizado

Asigna al bloque 2 un z-index de 100.
Asigna posicionamiento relativo al bloque 1
y un z-index de 200.