blob: 575921944a0ccbc7b84e974d06a2328004ec6aa9 (
plain)
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
|
---
title: z-index
slug: Web/CSS/z-index
translation_of: Web/CSS/z-index
---
<div>{{CSSRef}}</div>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad CSS <code>z-index</code> indica el orden de un elemento <a href="/es/docs/Web/CSS/position">posicionado</a> y sus descendientes. Cuando varios elementos se superponen, los elementos con mayor valor z-index cubren aquellos con menor valor.</p>
<p>Para una caja posicionada (es decir, una con cualquier <code>position</code> aparte de <code>static</code>), la propiedad <code>z-index</code> especifica:</p>
<ol>
<li>El nivel de apilamiento en el actual contexto de apilado.</li>
<li>Si la caja establece un contexto de apilamiento local.</li>
</ol>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">z-index: auto | <entero> | inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
<dt>auto</dt>
<dd>La caja no establece un nuevo contexto de apilamiento. El nivel de apilamiento de la caja generada es el mismo que el de la caja padre.</dd>
<dt><integer></dt>
<dd>Este entero es el nivel de apilamiento de la caja generada en el actual contexto de apilamiento. La caja además establece un contexto de apilamiento en el que el nivel de apilamiento es 0. Esto significa que los z-index de los elementos descendientes no son comparados con los elementos que están fuera de este elemento.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<div style="border: dashed; position: relative; height: 8em; margin-bottom: 1em; margin-top: 2em;">position:relative; z-index:1; <span style="background: gold; left: 60px; position: absolute; top: 3em;">position:absolute; z-index:2; left:60px; top:3em;</span> <span style="background: lightgreen; height: 7em; left: 20em; opacity: 0.9; position: absolute; top: -25px;">position:absolute; z-index:3;<br>
left:20em; top:-25px; opacity:0.9</span></div>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Define <code>visibility</code> como animable.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Especificación inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1.0")}}</td>
<td>4.0</td>
<td>4.0</td>
<td>1.0</td>
</tr>
<tr>
<td>Valores negativos (CSS2.1, no soportado en la antigua especificación CSS2)</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1.9")}}</td>
<td>4.0</td>
<td>4.0</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>Propiedad CSS {{Cssxref("position")}}</li>
<li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index">Entendiendo la propiedad CSS z-index</a></li>
</ul>
|
