From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../css_positioning/entendiendo_z_index/index.html | 47 ++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/index.html (limited to 'files/es/web/css/css_positioning/entendiendo_z_index/index.html') diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/index.html new file mode 100644 index 0000000000..14971890e0 --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_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 +--- +

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 {{cssxref("z-index")}} te permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado.

+ +
+

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.

+
+ +

(de CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

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") }}.

+ +

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 CSS-2.1 Appendix E para explicar mejor estas reglas.

+ +

Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.

+ +
    +
  1. Apilando sin z-index : Reglas de apilamiento por defecto
    2. +
  2. Apilamiento y float : Cómo son manejados los elementos flotantes
    3. +
  3. Agregando z-index : Usando z-index para cambiar el apilamiento por defecto
    4. +
  4. El contexto de apilamiento : Notas sobre el contexto de apilamiento
    5. +
  5. Ejemplo 1 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en el último nivel
    6. +
  6. Ejemplo 2 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en todos los niveles
    7. +
  7. Ejemplo 3 del contexto de apilamiento : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
    8. +
+ +

Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión.

+ +
+

Información del documento original

+ + +
-- cgit v1.2.3-54-g00ecf