Id. de artículo: 177378 - Última revisión: miércoles, 02 de mayo de 2012 - Versión: 1.0

INFO: Cómo funciona el atributo Z-index para los elementos HTML

Vista en paraleloHaga clic aquí para ver en paralelo el artículo de traducción automática y el artículo original en inglés.
Traducción automáticaAdvertencia: Artículo de Traducción Automática, vea la exención de responsabilidad.
Retired KB ArticleRenuncia a responsabilidad de los contenidos de la KB sobre productos a los que ya no se ofrece asistencia alguna
Nota acerca de su sistema operativoEste artículo se aplica a un sistema operativo distinto al que usa. El contenido del artículo que puede que no sea importante para usted, se deshabilitará

En esta página

Expandir todo | Contraer todo

Resumen

Hay muchas maneras de clasificar los elementos de una página Web. A efectos del presente artículo y el atributo z-index , nos podemos dividirlos en dos categorías: con ventanas y sin ventanas.

Elementos de ventanas

  • <OBJECT>elementos de etiqueta</OBJECT>
  • Controles de ActiveX
  • Plug-ins
  • Scriptlets HTML (DHTML) dinámico
  • Seleccione los elementos
  • IFRAMEs en Internet Explorer 5.01 y versiones anteriores
Nota Controles de ActiveX se implementan como sin ventanas y en realidad pertenecen a la categoría sin ventanas. De forma predeterminada, controles de Visual Basic de Microsoft y (Microsoft Foundation Classes) se utilizan con ventanas, pero los controles de Active Template Library (ATL) son sin ventana.

Elementos sin ventanas

  • Controles sin ventana ActiveX
  • IFRAMEs en Internet Explorer 5.5 y versiones posteriores
  • La mayoría de los elementos DHTML, tales como hipervínculos o tablas
Volver al principio

Más información

Todos los elementos con ventanas de pintura a sí mismos en la parte superior de todos los elementos sin ventanas, a pesar de los deseos de su contenedor. Sin embargo, los elementos con ventanas siguen el atributo z-index con respecto a otros, así como los elementos sin ventanas siguen el atributo z-index con respecto a la otra.

Todos los elementos sin ventanas se representan en el mismo plano MSHTML y dibujar los elementos con ventanas en un plano MSHTML independiente. Puede utilizar el índice z para manipular los elementos en el mismo plano, pero no para mezclar y combinar con elementos en distintos planos. Puede reorganizar el z indización de los elementos en cada plano, pero el plano de la ventana siempre dibuja en la parte superior del plano sin ventanas.
Volver al principio

Cómo funciona el Z-index de Internet Explorer 5

En Internet Explorer 5, IFRAMEs son controles con ventanas y siguen el atributo z-index con respecto a otros controles con ventanas, como los elementos SELECT . Si el índice z de IFRAME es mayor que los elementos SELECT , el IFRAME dibuja en la parte superior de los elementos SELECT y viceversa. Si el índice z es el mismo, el orden de los elementos en la página tiene prioridad; por lo tanto, el último elemento se dibuja sobre el elemento anterior.

Ejemplo de código siguiente muestra esto:
<HTML>
<HEAD>
<TITLE>Z-Index</TITLE>
<script>
function setindex()
{
	div1.style.zIndex=text1.value;
	select1.style.zIndex=text2.value;
	getindexes();
}

function getindexes(){

	text1.value=div1.style.zIndex;
	text2.value=select1.style.zIndex;
	text3.value=5;
}
</script>
</HEAD>
<BODY onload="getindexes()">

Div
<input type="text" value="" id=text1 name=text1 ><p>

Select
<input type="text" value="" id=text2 name=text2><p>

IFrame
<input type="text" value="" id=text3 name=text3><p>
<input type="button" value="Set Z-Index" id=button1 name=button1 onclick="setindex()">
<DIV id=div1 name=div1  style="width:200;height:200;background-color:lightblue;
position:absolute;left:350;top:250;z-index:">DIV</DIV>
<select id=select1 name=select1 style=";position:absolute;left:300;top:400;width=300;z-index:" 
size=1 >
	<option>Option1
	<option>Option2
	<option>Option3
</select>
<IFRAME id=iframe1 name=iframe1 src="" scroll=none style="width:100;height:115;position:absolute;
left:400;top:300;border-color:green;z-index:5"></iframe>
</BODY>
</HTML>
El índice z de IFRAME se establece en un valor constante de 5. Cuando introduzca un valor que es mayor que el resto de los elementos, el elemento DIV siempre dibuja en la parte inferior porque no tiene ventana y otros elementos dibujar sobre el elemento DIV . Cuando se cambia el índice z de Seleccionar elemento en un valor que es mayor que 5, los elementos SELECT dibuja sobre el IFRAME. Cuando cambia el índice z del elemento Seleccione un valor que es menor que 5, dibuja en la parte inferior de la IFRAME.

Cuando se establece el índice z de Seleccionar elemento en 5, el IFRAME dibuja sobre el elemento SELECT porque el IFRAME es el último elemento y, por lo tanto, tiene prioridad sobre Seleccione. Si el elemento SELECT seguido el IFRAME, dibuja el elemento sobre el IFRAME cuando los índices de z son las mismos.
Volver al principio

Cómo funciona el Z-index de Internet Explorer 5.5

Indización z es llevado a un nivel completamente nuevo en Internet Explorer 5.5 en qué IFRAMEs ya no son elementos de ventanas. Para obtener más información, vea el tema "Los elementos IFRAME sin ventana" en el siguiente artículo de Microsoft Developer Network (MSDN):
http://msdn.Microsoft.com/en-us/library/ms649493 (v=vs.85) .aspx #WindowlessFrames (http://msdn.microsoft.com/en-us/library/ms649493(v=vs.85).aspx#WindowlessFrames)
Esto deja el elemento SELECT como el único elemento que está ventana. Si utiliza el código anterior para ejecutar la página en Internet Explorer 5.5, cuando se establece el índice z del elemento Seleccione un valor que es mayor que 5, dibuja sobre el IFRAME. Cuando se establece el índice z de Seleccionar elemento en un valor que es menor que 5, el IFRAME superpone, aunque se trata de ambos elementos sin ventanas. Esto es lo que hace el IFRAME únicos: sigue el índice z con respecto a los elementos sin ventanas, y soporta z-index con respecto a los elementos con ventanas al igual que el elemento SELECT en este caso.

Cuando se establece el índice z del elemento DIV en un valor que es mayor que el IFRAME (por ejemplo, 6), el DIV cubre el IFRAME. Esto es compatible con la instrucción anterior que IFRAMEs son sin ventana y que siguen el orden z con respecto a otros elementos sin ventanas. Cuando se establece el índice z en un valor que es menor o igual que el IFRAME (por ejemplo, 5), dibuja todavía en la parte superior de la DIV porque el orden de los elementos tiene prioridad. Cuando se establece el índice z de la DIV a 6 y deja el índice z del elemento SELECT y IFRAME en 5, el elemento SELECT siempre dibuja en la parte superior de la DIV porque es con ventanas.

Sin embargo, IFRAME intenta dibujar sobre Seleccionar porque es la última en el orden. Para evitar esto, el valor z-index del elemento Seleccione debe ser mayor el IFRAME o el elemento SELECT debe ser pasado en la lista para asegurarse de que el elemento siempre dibuja sobre el IFRAME cuando los índices de z son los mismos. Debido a esto, puede resultar difícil indización z contenido similar. Para solucionar este problema, utilice los métodos siguientes:
  • Utilice el atributo de estilo de hojas de estilo en cascada (CSS) para ocultar y mostrar los elementos cuando sea necesario.
  • Utilizar secuencias de comandos DHTML. Aunque los comportamientos son generalmente preferidos, esto es una instancia donde se prefieren scriptlets.
  • En Internet Explorer 5.5, puede utilizar el objeto de menú emergente , que permite mostrar contenido enriquecido en la parte superior de cualquier cosa. Esto es muy útil para los menús y la funcionalidad de punta de herramienta. Para obtener más información, consulte el artículo "popup objeto" en el siguiente sitio Web de MSDN:
    http://msdn.Microsoft.com/en-us/library/ms535882 (v=vs.85) .aspx (http://msdn.microsoft.com/en-us/library/ms535882(v=vs.85).aspx)
  • Utilice los controles sin ventana de ActiveX en lugar de objetos de ventanas. Por desgracia, todos los controles de ActiveX no tienen implementaciones sin ventanas.
Volver al principio

Referencias

Para obtener más información acerca de cómo desarrollar soluciones basadas en Web para Microsoft Internet Explorer, visite los siguientes sitios Web de Microsoft:
http://msdn.Microsoft.com/ie/ (http://msdn.microsoft.com/ie/)

http://support.Microsoft.com/IEP (http://support.microsoft.com/iep)
Volver al principio
Palabras clave: 
kbbug kbdhtml kbfaq kbieobj kbinfo kbmt KB177378 KbMtes
Volver al principio
Traducción automáticaTraducción automática
IMPORTANTE: Este artículo ha sido traducido por un software de traducción automática de Microsoft (http://support.microsoft.com/gp/mtdetails) en lugar de un traductor humano. Microsoft le ofrece artículos traducidos por un traductor humano y artículos traducidos automáticamente para que tenga acceso en su propio idioma a todos los artículos de nuestra base de conocimientos (Knowledge Base). Sin embargo, los artículos traducidos automáticamente pueden contener errores en el vocabulario, la sintaxis o la gramática, como los que un extranjero podría cometer al hablar el idioma. Microsoft no se hace responsable de cualquier imprecisión, error o daño ocasionado por una mala traducción del contenido o como consecuencia de su utilización por nuestros clientes. Microsoft suele actualizar el software de traducción frecuentemente.
Haga clic aquí para ver el artículo original (en inglés): 177378  (http://support.microsoft.com/kb/177378/en-us/ )
Volver al principio
Retired KB ArticleRenuncia a responsabilidad de los contenidos de la KB sobre productos a los que ya no se ofrece asistencia alguna
El presente artículo se escribió para productos para los que Microsoft ya no ofrece soporte técnico. Por tanto, el presente artículo se ofrece "tal cual" y no será actualizado.
Volver al principio