
La propiedad z-index en CSS determina el orden de los elementos posicionados en el eje Z.
Funciones z-index css
Valor inicial | auto |
---|---|
Aplicado a | Elementos posicionados. |
Heredable | No |
Móvil | Sí |
Valor calculado | Como se especificó. |
/* es una palabra reservada */ z-index: auto; /* <integer> valores numéricos */ z-index: 0; z-index: 3; z-index: 289; z-index: -1; /* Los números negativos tienen el orden más bajo */ /* valores globales */ z-index: inherit; z-index: initial; z-index: unset;
Ejemplos y aplicaciones en código
En el siguiente ejemplo, mostraremos tres elementos que <div>
tienen propiedades para z-index
organizar en el eje Z en un orden diferente al orden HTML predeterminado (el último elemento definido en el HTML aparecerá más alto que el resto).
Código HTML:
<div class="dashed-box"> < span > Fondo intermitente </ span > <div class="gold-box"> Golden Fund </ div > <div class="green-box"> Fondo verde </ div > </ div >
Código CSS:
.dashed-box { z-index: 1; position: relative; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; padding: 1em; } .gold-box { z-index: 3; position: absolute; background: gold; width: 80%; left: 60px; top: 3em; padding: 1em; } .green-box { z-index: 2; position: absolute; background: lightgreen; width: 20%; left: 65%; top: -25px; height: 7em; opacity: 0.9; padding: 1em; }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 3,0 | 4.0 | 4.0 | 1.0 |
Características general
<integer>
Un valor numérico <length>
positivo o negativo determina el orden del elemento en el eje Z, y los valores negativos dan al elemento la prioridad más baja en el orden.
auto
Este valor establecerá el orden del elemento en el mismo orden que el del elemento padre. Este es el valor predeterminado.
Estructura z-index css
z-index: auto | <integer>;
Consulte también
- La página de propiedades
position
que describe cómo se coloca el objeto en el documento. - En la página de cada una de las propiedades
top
,bottom
,right
yleft
, son responsables de localizar el elemento. - La página de propiedades
float
que especifica que el elemento debe colocarse a la izquierda o derecha del contenedor al que pertenece.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS