diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
| commit | a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch) | |
| tree | 5032e6779a402a863654c9d65965073f09ea4182 /files/es/web/css/css_positioning/understanding_z_index | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2 translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip | |
unslug es: move
Diffstat (limited to 'files/es/web/css/css_positioning/understanding_z_index')
8 files changed, 1194 insertions, 0 deletions
diff --git a/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..0278b3254f --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,179 @@ +--- +title: Agregando z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_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"><!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> +</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> diff --git a/files/es/web/css/css_positioning/understanding_z_index/index.html b/files/es/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..14971890e0 --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,47 @@ +--- +title: Entendiendo la propiedad CSS z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index +tags: + - Avanzado + - CSS + - Entendiendo_CSS_Z_Index + - Guía + - Referencia + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +<p>Usualmente se puede considerar que las páginas HTML tienen dos dimensiones, porque el texto, las imágenes y otros elementos son organizados en la página sin superponerse. Hay un solo flujo de renderizado, y todos los elementos son concientes del espacio ocupado por otros. El atributo <span class="seoSummary">{{cssxref("z-index")}}</span> te permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado.</p> + +<blockquote> +<p style="">En CSS 2.1, cada caja tiene una posición en tres dimensiones. Adicionalmente a sus posiciones horizontales y verticales, las cajas caen a lo largo de un "eje-z" y son formadas una encima de la otra. Las posiciones eje-Z son particularmente relevantes cuando las cajas se superponen visualmente.</p> +</blockquote> + +<p>(de <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p> + +<p>Eso significa que las reglas de estilo CSS te permiten posicionar cajas en capas adicionales a la capa normal de renderizado (capa 0). La posición Z de cada capa es expresada como un entero que representa el orden de apilamiento durante el proceso de renderizado. Números más grandes significan mayor cercanía al observador. La posición Z puede ser controlada con la propiedad CSS {{ cssxref("z-index") }}.</p> + +<p>Usar z-index parece extremadamente fácil: una sola propiedad, asigna un número entero, con un comportamiento fácil de entender. Sin embargo, cuando z-index es aplicada a jerarquías complejas de elementos HTML, su comportamiento puede ser difícil de entender o incluso impredecible. Esto es debido a reglas complejas de apilamiento. De hecho una sección dedicada ha sido reservada en la especificación CSS <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> para explicar mejor estas reglas.</p> + +<p>Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.</p> + +<ol> + <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/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</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> +</ol> + +<p><small><em>Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión.</em></small></p> + +<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 class="external" href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Fecha de última actualización: 9 de Julio del 2005</li> +</ul> +</div> diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..81b145e1a3 --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,144 @@ +--- +title: Apilamiento y float +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float +tags: + - Avanzado + - CSS + - Entendiendo_CSS_z-index + - Guía + - Referencia + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +<div>{{cssref}}</div> + +<h3 id="Apilamiento_y_float">Apilamiento y float</h3> + +<p>Para los bloques flotantes el orden de apilamiento es un poco diferente. Los bloques flotantes son colocados entre bloques no posicionados y bloques posicionados:</p> + +<ol> + <li>Fondo y bordes del elemento raiz</li> + <li>Bloques descendientes en el flujo normal, en orden de aparición (en HTML)</li> + <li>Bloques flotantes</li> + <li>Elementos posicionados descendentemente , en orden de aparición (en HTML)</li> +</ol> + +<p>En realidad, como puedes ver en el siguiente ejemplo, el fondo y el borde del bloque no posicionado (DIV #4) no son afectados por los bloques flotantes, mientras que el contenido si es afectado. Esto ocurre de acuerdo al comportamiento flotante stándar de CSS.</p> + +<p>Este comportamiento puede ser explicado con una versión mejorada de la lista previa:</p> + +<ol> + <li>Fondo y bordes del elemento raiz</li> + <li>Bloques descendientes en el flujo normal, en orden de aparición (en HTML)</li> + <li>Bloques flotantes</li> + <li>Descendientes en línea en el flujo normal</li> + <li>Elementos posicionados descendentemente , en orden de aparición (en HTML)</li> +</ol> + +<div class="note"><strong>Nota:</strong> En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)</div> + +<p>{{ EmbedLiveSample('Example_source_code', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}</p> + +<h2 id="Código_fuente_de_ejemplo"><strong>Código fuente de ejemplo</strong></h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="abs1"> + <b>DIV #1</b><br />position: absolute;</div> + +<div id="flo1"> + <b>DIV #2</b><br />float: left;</div> + +<div id="flo2"> + <b>DIV #3</b><br />float: right;</div> + +<br /> + +<div id="sta1"> + <b>DIV #4</b><br />no positioning</div> + +<div id="abs2"> + <b>DIV #5</b><br />position: absolute;</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + padding: 10px; + text-align: center; +} + +b { + font-family: sans-serif; +} + +#abs1 { + position: absolute; + width: 150px; + height: 200px; + top: 10px; + right: 140px; + border: 1px dashed #900; + background-color: #fdd; +} + +#sta1 { + height: 100px; + border: 1px dashed #996; + background-color: #ffc; + margin: 0px 10px 0px 10px; + text-align: left; +} + +#flo1 { + margin: 0px 10px 0px 20px; + float: left; + width: 150px; + height: 200px; + border: 1px dashed #090; + background-color: #cfc; +} + +#flo2 { + margin: 0px 20px 0px 10px; + float: right; + width: 150px; + height: 200px; + border: 1px dashed #090; + background-color: #cfc; +} + +#abs2 { + position: absolute; + width: 150px; + height: 100px; + top: 130px; + left: 100px; + border: 1px dashed #990; + background-color: #fdd; +}</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> + <p><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</p> + </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> </p> diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..def9c5ea8e --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,132 @@ +--- +title: Ejemplo 1 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +<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="Ejemplo_1_del_contexto_de_apilamiento">Ejemplo 1 del contexto de apilamiento</h3> + +<p>Empecemos con un ejemplo básico. En el contexto de apilamiento raíz tenemos dos DIVs (DIV #1 and DIV #3), ambos con posición relativa, pero sin propiedad z-index. Dentro del DIV #1 se encuentra el DIV #2 de posición absoluta, mientras que en el DIV #3 se encuentra el DIV #4 con posición absoluta, ambos sin propiedad z-index.</p> + +<p>El único contexto de apilamiento es el contexto raíz. Sin la propiedad z-index, los elementos son apilados por orden de ocurrencia.</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p> + +<p>Si a DIV #2 le asignamos un valor z-index positivo (no-cero y no-auto), es renderizado encima de todos los otros DIVs.</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p> + +<p>Luego si al DIV #4 también se le asigna un z-index positivo mayor que el z-index del DIV #2, es renderizado encima de los otros DIVs incluyendo DIV #2.</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p> + +<p>En este último ejemplo puedes ver que el DIV #2 y el DIV #4 no son hermanos, porque pertenecen a padres distintos en la jerarquía de elementos HTML. A pesar de esto, el apilamiento del DIV #4 con respecto al DIV #2 puede ser controlado a través de z-index. Pasa que, dado a que al DIV #1 y al DIV #3 no se le ha asignado ningún valor z-index, ellos no han creado un contexto de apilamiento. Esto significa que todos sus contenidos, incluyendo el DIV #2 y el DIV #4, pertenecen al mismo contexto de apilamiento raíz.</p> + +<p>En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente asimilados dentro del elemento raíz, y la jerarquía resultante es la siguiente:</p> + +<ul> + <li>contexto de apilamiento raíz + <ul> + <li>DIV #2 (z-index 1)</li> + <li>DIV #4 (z-index 2)</li> + </ul> + </li> +</ul> + +<div class="note"><strong>Nota:</strong> El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento.</div> + +<h2 id="Ejemplo"><strong>Ejemplo</strong></h2> + +<h3 id="HTML"><strong>HTML</strong></h3> + +<pre class="brush: html"><div id="div1"> +<br /><span class="bold">DIV #1</span> +<br />position: relative; + <div id="div2"> + <br /><span class="bold">DIV #2</span> + <br />position: absolute; + <br />z-index: 1; + </div> +</div> + +<br /> + +<div id="div3"> +<br /><span class="bold">DIV #3</span> +<br />position: relative; + <div id="div4"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; + <br />z-index: 2; + </div> +</div> + +</body></html> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.bold { + font-weight: bold; + font: 12px Arial; +} +#div1, +#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} +#div2 { + opacity: 0.8; + z-index: 1; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} +#div4 { + opacity: 0.8; + z-index: 2; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}</p> + +<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/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</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_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<span id="cke_bm_89E" style="display: none;"> </span></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: July 9th, 2005</li> +</ul> +</div> diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..2955b43b7f --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,137 @@ +--- +title: Ejemplo 2 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +<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="Ejemplo_2_del_contexto_de_apilamiento">Ejemplo 2 del contexto de apilamiento</h3> + +<p>Este es un ejemplo muy simple, pero es la clave para entender el concepto de <em>contexto de apilamiento. </em>Tenemos los mismos 4 DIVs del ejemplo previo, pero ahora las propiedades z-index son asignadas en ambos niveles de la jerarquía.</p> + +<p>{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}</p> + +<p>Puedes ver que el DIV #2 (z-index: 2) está encima del DIV #3 (z-index: 1), porque ambos pertenecen al mismo contexto de apilamiento (el contexto raíz), así que los valores z-index indican cómo son apilados los elementos.</p> + +<p>Lo que puede ser considerado extraño es que el DIV #2 (z-index: 2) está encima del DIV #4 (z-index: 10), a pesar de sus valores z-index. La razón es que ellos no pertenecen al mismo contexto de apilamiento. El DIV #4 pertenece al contexto de apilamiento creado por el DIV #3, y como explicamos previamente el DIV #3 (y todos su contenido) está debajo del DIV #2.</p> + +<p>Para entender mejor esta situación, esta es la jerarquía del contexto de apilamiento:</p> + +<ul> + <li>contexto de apilamiento raíz + <ul> + <li>DIV #2 (z-index 2)</li> + <li>DIV #3 (z-index 1) + <ul> + <li>DIV #4 (z-index 10)</li> + </ul> + </li> + </ul> + </li> +</ul> + +<div class="note"><strong>Nota:</strong> Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.</div> + +<h3 id="Código_fuente_de_ejemplo"><strong>Código fuente de ejemplo</strong></h3> + +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +#div2 { z-index: 2; } +#div3 { z-index: 1; } +#div4 { z-index: 10; } + +#div1,#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#div2 { + opacity: 0.8; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#div4 { + opacity: 0.8; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +} + + +</style></head> + +<body> + + <br /> + + <div id="div1"><br /> + <span class="bold">DIV #1</span><br /> + position: relative; + <div id="div2"><br /> + <span class="bold">DIV #2</span><br /> + position: absolute;<br /> + z-index: 2; + </div> + </div> + + <br /> + + <div id="div3"><br /> + <span class="bold">DIV #3</span><br /> + position: relative;<br /> + z-index: 1; + <div id="div4"><br /> + <span class="bold">DIV #4</span><br /> + position: absolute;<br /> + z-index: 10; + </div> + </div> + +</body> +</html> +</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/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</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_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: July 9th, 2005</li> +</ul> +</div> diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..c41d8b56ad --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,183 @@ +--- +title: Ejemplo 3 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> + +<h3 id="Ejemplo_3_del_contexto_de_apilamiento">Ejemplo 3 del contexto de apilamiento</h3> + +<p>Este último ejemplo muestra los problemas que surgen cuando se combinan varios elementos posicionados en una jerarquía HTML multi nivel y cuando los valores z-index son asignados usando selectores de clase.</p> + +<p>Tomemos como ejemplo un menú jerárquico de tres niveles formado por varios DIVs posicionados. DIVs de segundo y tercer nivel aparecen cuando se pone el cursor encima o se hace clic en sus padres. Usualmente este tipo de menú es generado mediante un script del lado del cliente o del lado del servidor, así que las reglas de estilos son asignadas con un selector de clase en lugar de un selector de id.</p> + +<p>Si los tres niveles del menú se superponen parcialmente, entonces gestionar el apilamiento se podría convertir en un problema.</p> + +<p>{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}</p> + +<p>El menú de primer nivel solo tiene posición relativa, así que ningún contexto de apilamiento es creado.</p> + +<p>El menú de segundo nivel tiene posición absoluta dentro del elemento padre. Para colocarlo encima de todos los menus de primer nivel, usamos z-index. El problema es que para cada menú de segundo nivel, un contexto de apilamiento es creado y cada menú de tercer nivel pertenece al contexto de su padre.</p> + +<p>De manera que un menú de tercer nivel va a ser apilado bajo los menus de segundo nivel porque todos los menus de segundo nivel comparten el mismo valor z-index y las reglas de apilamiento por defecto son aplicadas.</p> + +<p>Para entender mejor la situación, esta es la jerarquía del contexto de apilamiento:</p> + +<ul> + <li>contexto de apilamiento raíz + <ul> + <li>NIVEL #1 + <ul> + <li>NIVEL #2 (z-index: 1) + <ul> + <li>NIVEL #3</li> + <li>...</li> + <li>NIVEL #3</li> + </ul> + </li> + <li>NIVEL #2 (z-index: 1)</li> + <li>...</li> + <li>NIVEL #2 (z-index: 1)</li> + </ul> + </li> + <li>NIVEL #1</li> + <li>...</li> + <li>NIVEL #1</li> + </ul> + </li> +</ul> + +<p>Este problema puede ser evitado al remover la superposición entre menus de diferentes niveles, o usando valores z-index individuales (y diferentes) asignados a través del selector id en lugar de un selector de clase, o aplanando la jerarquía HTML.</p> + +<div class="note"><strong>Nota:</strong> En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.</div> + +<h3 id="Código_fuente_de_ejemplo"><strong>Código fuente de ejemplo</strong></h3> + +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +div.lev1 { + width: 250px; + height: 70px; + position: relative; + border: 2px outset #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#container1 { + z-index: 1; + position: absolute; + top: 30px; + left: 75px; +} + +div.lev2 { + opacity: 0.9; + width: 200px; + height: 60px; + position: relative; + border: 2px outset #990000; + background-color: #ffdddd; + padding-left: 5px; +} + +#container2 { + z-index: 1; + position: absolute; + top: 20px; + left: 110px; +} + +div.lev3 { + z-index: 10; + width: 100px; + position: relative; + border: 2px outset #000099; + background-color: #ddddff; + padding-left: 5px; +} + +</style></head> + +<body> + +<br /> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> + + <div id="container1"> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />z-index: 1; + + <div id="container2"> + + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + + </div> + + </div> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />z-index: 1; + </div> + + </div> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +</body></html> +</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/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</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> +</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: July 9th, 2005</li> +</ul> +</div> diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..97038e7bae --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,141 @@ +--- +title: Apilando sin z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_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="Apilando_sin_z-index">Apilando sin z-index</h3> + +<p>Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba):</p> + +<ol> + <li>El fondo y los bordes del elemento raiz</li> + <li>Bloques descendientes en el flujo normal, en orden de aparición (en HTML)</li> + <li>Elementos posicionados descendentemente, en orden de aparición (en HTML)</li> +</ol> + +<p>En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.</p> + +<div class="note"> +<p><strong>Notas:</strong></p> + +<ul> + <li>Dado un grupo homogéneo de elementos sin propiedad z-index, tales como los bloques posicionados (DIV #1 al #4) en el ejemplo, el orden de apilamiento de los elementos es su orden en la jerarquía HTML, independientemente de su posición.</li> + <li> + <p>Bloques estándar (DIV #5) en el flujo normal, sin ninguna propiedad de posicionamiento, siempre son renderizados antes de los elementos posicionados y aparecen debajo de los mismos, incluso si están después en la jerarquía HTML.</p> + </li> +</ul> +</div> + +<p><img alt="understanding_zindex_01.png" class="default internal" src="/@api/deki/files/910/=understanding_zindex_01.png"></p> + +<p> </p> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="absdiv1"> + <br /><span class="bold">DIV #1</span> + <br />position: absolute; </div> +<div id="reldiv1"> + <br /><span class="bold">DIV #2</span> + <br />position: relative; </div> +<div id="reldiv2"> + <br /><span class="bold">DIV #3</span> + <br />position: relative; </div> +<div id="absdiv2"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; </div> +<div id="normdiv"> + <br /><span class="bold">DIV #5</span> + <br />no positioning </div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css"> .bold { + font-weight: bold; + font: 12px Arial; + } + #normdiv { + height: 70px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 50px 0px 50px; + text-align: center; + } + #reldiv1 { + opacity: 0.7; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; + } + #reldiv2 { + opacity: 0.7; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; + } + #absdiv1 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; + } + #absdiv2 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; + } +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>(Si la imagen no aparece en CodePen, haz clic en el botón Tidy en la sección CSS)</p> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}</p> + +<h3 id="También_puedes_ver">También puedes ver</h3> + +<ul> + <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/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</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> </p> diff --git a/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..1daf172048 --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,231 @@ +--- +title: El contexto de apilamiento +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +<p>El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.</p> + +<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> + +<h2 id="El_contexto_de_apilamiento">El contexto de apilamiento</h2> + +<p> </p> + +<p>En el ejemplo previo, <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a>, el orden de renderizado de ciertos DIVs es influenciado por sus valores z-index. Esto ocurre debido a que estos DIVs tienen propiedades especiales que causan que formen un contexto de apilamiento.</p> + +<p>Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que</p> + +<ul> + <li>sea el elemento raiz (HTML),</li> + <li>tenga posición (absoluta o relativa) con un valor z-index distinto de "auto",</li> + <li>un elemento flex con un valor z-index distinto de "auto", que sea el elemento padre display: flex|inline-flex,</li> + <li>sean elementos con un valor {{cssxref("opacity")}} menor de 1. (Mira <a href="http://www.w3.org/TR/css3-color/#transparency" title="http://www.w3.org/TR/css3-color/#transparency">la especificación de opacity</a>),</li> + <li>elementos con un valor {{cssxref("transform")}} distinto de "none",</li> + <li>elementos con un valor {{cssxref("mix-blend-mode")}} distinto de "normal",</li> + <li>elementos con un valor {{cssxref("filter")}} distinto de "none",</li> + <li>elementos con un valor {{cssxref("perspective")}} distinto de "none",</li> + <li>elementos con un valor {{cssxref("isolation")}} igual a "isolate",</li> + <li><code>position: fixed</code></li> + <li>especifican cualquier atributo superior en <code>{{cssxref("will-change")}} incluso si no especificas valores para estos atributos directamente </code>(Mira <a href="http://dev.opera.com/articles/css-will-change-property/">este post</a>)</li> + <li>elementos con un valor {{cssxref("-webkit-overflow-scrolling")}} igual a "touch"</li> +</ul> + +<p>Dentro de un contexto de apilamiento, los elementos hijos son apilados de acuerdo a las mismas reglas previamente explicadas. Es importante entender que los valores z-index de los contextos de apilamiento de los hijos solo tienen sentido en el contexto del padre. Los contextos de apilamiento son tratados atómicamente como una sola unidad en el contexto de apilamiento del padre.</p> + +<p>En resumen:</p> + +<ul> + <li>Posicionar y asignar un valor z-index a un elemento HTML crea un contexto de apilamiento, (asi como también lo hace asignar una opacidad parcial)</li> + <li>Contextos de apilamiento pueden ser contenidos en otros contextos de apilamiento, y juntos crean una jerarquía de contextos de apilamiento</li> + <li>Cada contexto de apilamiento es completamente independiente de sus hermanos: solo los elementos descendientes son considerados cuando el apilamiento es procesado.</li> + <li>Cada contexto de apilamiento es auto contenido: luego que los contenidos del elemento son apilados, el elemento completo es considerado en el orden de apilamiento del contexto del padre.</li> +</ul> + +<div class="note"><strong>Nota:</strong> La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.</div> + +<h2 id="El_ejemplo"><strong>El ejemplo</strong></h2> + +<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p> + +<p>En este ejemplo cada elemento posicionado crea su propio contexto de apilamiento, debido a sus valores de posicionamiento y z-index. La jerarquía de contextos de apilamiento es organizada de la siguiente manera:</p> + +<ul> + <li>Raíz + <ul> + <li>DIV #1</li> + <li>DIV #2</li> + <li>DIV #3 + <ul> + <li>DIV #4</li> + <li>DIV #5</li> + <li>DIV #6</li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>Es importante notar que el DIV #4, DIV #5 y el DIV #6 son hijos del DIV #3, así que el apilamiento de esos elementos es completamente resuelto dentro del DIV#3. Una vez que el apilamiento y el renderizado dentro del DIV#3 ha sido completado, todo el elemento DIV#3 es apilado en el elemento raíz con respecto a sus DIV hermanos.</p> + +<div class="note"> +<p><strong>Notas:</strong></p> + +<ul> + <li>DIV #4 es renderizado debajo de DIV #1 porque el z-index (5) de DIV #1 es válido dentro del contexto de apilamiento del elemento raiz, mientras que el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV #4 pertenece a DIV #3, que tiene un valor z-index menor.</li> + <li>Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1) porque DIV #5 pertenece a DIV #3, que tiene un valor z-index mayor.</li> + <li>El valor z-index de DIV #3 es 4, pero este valor es independiente del z-index de DIV #4, DIV #5 and DIV #6, porque pertenece a un contexto de apilamiento diferente.</li> + <li>Una forma fácil de descubrir el <em>orden de renderizado</em> de los elementos apilados en el eje Z es pensar en esto como un tipo de "número de versión", donde los elementos hijos son números de versión menores bajo los números de versión mayores de sus padres. De esta manera podemos ver fácilmente cómo un elemento con un valor z-index de 1 (DIV #5) es apilado encima de un elemento con un valor z-index de 2 (DIV #2), y cómo un elemento con un valor z-index de 6 (DIV #4) es apilado debajo de un elemento con un valor z-index de 5 (DIV #1). En nuestro ejemplo (ordenado de acuerdo al orden de renderizado final): + <ul> + <li>Raíz + <ul> + <li>El valor z-index de DIV #2 es 2</li> + <li>El valor z-index de DIV #3 es 4 + <ul> + <li>El valor z-index de DIV #5 es 1, apilado bajo un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.1</li> + <li>El valor z-index de DIV #6 es 3, apilado debajo de un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.3</li> + <li>El valor z-index de DIV #4 es 6, apilado bajo un elemento con valor z-index de 4, que resulta en un orden de renderizado de 4.6</li> + </ul> + </li> + <li>El valor z-index de DIV #1 es 5</li> + </ul> + </li> + </ul> + </li> +</ul> +</div> + +<h2 id="Ejemplo"><strong>Ejemplo</strong></h2> + +<h3 id="HTML"><strong>HTML</strong></h3> + +<pre class="brush: html"> <div id="div1"> + <h1>Division Element #1</h1> + <code>position: relative;<br/> + z-index: 5;</code> + </div> + + <div id="div2"> + <h1>Division Element #2</h1> + <code>position: relative;<br/> + z-index: 2;</code> + </div> + + <div id="div3"> + + <div id="div4"> + <h1>Division Element #4</h1> + <code>position: relative;<br/> + z-index: 6;</code> + </div> + + <h1>Division Element #3</h1> + <code>position: absolute;<br/> + z-index: 4;</code> + + <div id="div5"> + <h1>Division Element #5</h1> + <code>position: relative;<br/> + z-index: 1;</code> + </div> + + <div id="div6"> + <h1>Division Element #6</h1> + <code>position: absolute;<br/> + z-index: 3;</code> + </div> + </div> +</pre> + +<h3 id="Division_Element_.231" name="Division_Element_.231">CSS</h3> + +<pre class="brush: css">* { + margin: 0; +} +html { + padding: 20px; + font: 12px/20px Arial, sans-serif; +} +div { + opacity: 0.7; + position: relative; +} +h1 { + font: inherit; + font-weight: bold; +} +#div1, +#div2 { + border: 1px dashed #696; + padding: 10px; + background-color: #cfc; +} +#div1 { + z-index: 5; + margin-bottom: 190px; +} +#div2 { + z-index: 2; +} +#div3 { + z-index: 4; + opacity: 1; + position: absolute; + top: 40px; + left: 180px; + width: 330px; + border: 1px dashed #900; + background-color: #fdd; + padding: 40px 20px 20px; +} +#div4, +#div5 { + border: 1px dashed #996; + background-color: #ffc; +} +#div4 { + z-index: 6; + margin-bottom: 15px; + padding: 25px 10px 5px; +} +#div5 { + z-index: 1; + margin-top: 15px; + padding: 5px 10px; +} +#div6 { + z-index: 3; + position: absolute; + top: 20px; + left: 180px; + width: 150px; + height: 125px; + border: 1px dashed #009; + padding-top: 125px; + background-color: #ddf; + text-align: center; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example', '556', '396') }}</p> + +<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/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</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: July 9th, 2005</li> +</ul> +</div> |