files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180

---
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
---
<p>« <a href="/es/CSS" title="CSS">CSS</a> « <a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index" title="Understanding CSS z-index">ENTENDIENDO LA PROPIEDAD CSS Z-INDEX</a></p>

<h3 id="Agregando_cssxref(z-index)">Agregando {{ cssxref("z-index") }}</h3>

<p>El primer ejemplo, <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title="  javichito Apilando sin z-index">Apilando sin z-index</a>, 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.</p>

<p>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.</p>

<div class="warning">
<p><strong>Precaución:</strong> z-index solo tiene efecto si un elemento es <a href="/es/CSS/position" title="position">posicionado</a>.</p>
</div>

<ul>
 <li><em>bottom: el más lejano al observador</em></li>
 <li>...</li>
 <li>Capa -3</li>
 <li>Capa -2</li>
 <li>Capa -1</li>
 <li>Capa 0<em>capa de renderizado por defecto</em></li>
 <li>Capa 1</li>
 <li>Capa 2</li>
 <li>Capa 3</li>
 <li>...</li>
 <li><em>top: el más cercano al observador</em></li>
</ul>

<div class="note">
<p><strong>Notas:</strong></p>

<ul>
 <li>Cuando la propiedad z-index no ha sido especificada, los elementos son renderizados en la capa de renderizado por defecto 0 (cero).</li>
 <li>Si varios elementos comparten el mismo valor z-index (<em>i.e.</em> están situados en la misma capa), las reglas de apilamiento explicadas en la sección <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title="  javichito Apilando sin z-index">Apilando sin z-index</a> son aplicadas.</li>
</ul>
</div>

<p>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.</p>

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

<h3 id="Código_fuente_de_ejemplo"><strong>Código fuente de ejemplo</strong></h3>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Adding z-index&lt;/title&gt;
    &lt;style type="text/css"&gt;

    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;
    }

    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

    &lt;br /&gt;&lt;br /&gt;

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

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

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

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

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

&lt;/body&gt;
&lt;/html&gt;
</pre>

<h3 id="También_puedes_ver">También puedes ver</h3>

<ul>
 <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title="  javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li>
 <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li>
 <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li>
 <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li>
 <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li>
 <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel</li>
</ul>

<div class="originaldocinfo">
<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3>

<ul>
 <li>Autor(es): Paolo Lombardi</li>
 <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
 <li>Last Updated Date: November 3rd, 2014</li>
</ul>
</div>

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