Propiedad z-index
La propiedad z-index establece qué elemento
quedará encima en caso de que varios elementos
se superpongan entre sí.
Sintaxis
selector {
z-index: número | auto;
}
El número debe ser entero, positivo o negativo. Puede ser cero.
Valores
| Valor | Descripción |
|---|---|
| Número |
Un número entero establece el orden de superposición de elementos:
al superponerse elementos, quedará encima
aquel que tenga un z-index mayor.
|
auto |
El orden de superposición se construye automáticamente: quedará más arriba aquel elemento que esté ubicado más abajo en el código HTML. |
Valor por defecto: auto.
Ejemplo
En este ejemplo, los bloques se superpondrán
entre sí en el orden en que aparecen en el código
HTML (z-index no está definido y tendrá
su valor por defecto - auto). El primer
bloque estará en el fondo (rojo), y el último
- encima de todos (verde):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#div1 {
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: red;
}
#div2 {
position: absolute;
top: 60px;
left: 60px;
width: 50px;
height: 50px;
background: blue;
}
#div3 {
position: absolute;
top: 90px;
left: 90px;
width: 50px;
height: 50px;
background: green;
}
:
Ejemplo
Cambiemos el orden de superposición definiendo z-index.
Al bloque rojo - 3, al azul - 2,
al verde - 1. El orden de superposición cambiará
al inverso (encima de todos estará el bloque con z-index
3):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#div1 {
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: red;
z-index: 3;
}
#div2 {
position: absolute;
top: 60px;
left: 60px;
width: 50px;
height: 50px;
background: blue;
z-index: 2;
}
#div3 {
position: absolute;
top: 90px;
left: 90px;
width: 50px;
height: 50px;
background: green;
z-index: 1;
}
: