--- title: Agregando z-index slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index original_slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index ---

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

Agregando {{ cssxref("z-index") }}

El primer ejemplo, Apilando sin z-index, explica cómo es organizado el apilamiento por defecto. Si quieres especificar un orden diferente de apilamiento, debes posicionar un elemento y usar la propiedad z-index.

Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál representa la posición del elemento en el eje-Z. Si no estás familiarizado con el eje-Z, imagina que la página tiene muchas capas una encima de la otra. Cada capa es numerada. Una capa con un número mayor es renderizada encima de las capas con números menores.

Precaución: z-index solo tiene efecto si un elemento es posicionado.

Notas:

En el siguiente ejempo, el orden de apilamiento de las capas es organizado usando z-index. El z-index del DIV#5 no hace efecto ya que este no es un elemento posicionado.

{{ EmbedLiveSample('Example_source_code', '468', '365', '', 'Web/Guide/CSS/Understanding_z_index/Adding_z-index') }}

Código fuente de ejemplo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Adding z-index</title>
    <style type="text/css">

    div {
        opacity: 0.7;
        font: 12px Arial;
    }

    span.bold { font-weight: bold; }

    #normdiv {
        z-index: 8;
        height: 70px;
        border: 1px dashed #999966;
        background-color: #ffffcc;
        margin: 0px 50px 0px 50px;
        text-align: center;
    }

    #reldiv1 {
        z-index: 3;
        height: 100px;
        position: relative;
        top: 30px;
        border: 1px dashed #669966;
        background-color: #ccffcc;
        margin: 0px 50px 0px 50px;
        text-align: center;
    }

    #reldiv2 {
        z-index: 2;
        height: 100px;
        position: relative;
        top: 15px;
        left: 20px;
        border: 1px dashed #669966;
        background-color: #ccffcc;
        margin: 0px 50px 0px 50px;
        text-align: center;
    }

    #absdiv1 {
        z-index: 5;
        position: absolute;
        width: 150px;
        height: 350px;
        top: 10px;
        left: 10px;
        border: 1px dashed #990000;
        background-color: #ffdddd;
        text-align: center;
    }

    #absdiv2 {
        z-index: 1;
        position: absolute;
        width: 150px;
        height: 350px;
        top: 10px;
        right: 10px;
        border: 1px dashed #990000;
        background-color: #ffdddd;
        text-align: center;
    }

    </style>
</head>

<body>

    <br /><br />

    <div id="absdiv1">
        <br /><span class="bold">DIV #1</span>
        <br />position: absolute;
        <br />z-index: 5;
    </div>

    <div id="reldiv1">
        <br /><span class="bold">DIV #2</span>
        <br />position: relative;
        <br />z-index: 3;
    </div>

    <div id="reldiv2">
        <br /><span class="bold">DIV #3</span>
        <br />position: relative;
        <br />z-index: 2;
    </div>

    <div id="absdiv2">
        <br /><span class="bold">DIV #4</span>
        <br />position: absolute;
        <br />z-index: 1;
    </div>

    <div id="normdiv">
        <br /><span class="bold">DIV #5</span>
        <br />no positioning
        <br />z-index: 8;
    </div>

</body>
</html>

También puedes ver

Información del documento original

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}