En el proceso de diseño de páginas HTML, a menudo encontramos problemas causados por elementos de formulario que cubren elementos de estilo. La Figura 1 es un ejemplo típico. No subestimes este problema aparentemente de "bajo nivel". Problemas similares no son infrecuentes incluso en algunos sitios web más grandes. Este artículo explora la causa raíz de este problema y propone un remedio; la razón por la que digo un remedio en lugar de una solución permanente es porque los dos gigantes, Microsoft y NetScape, aún no tienen contramedidas.
1. Prioridad de visualización de elementos HTML
Los elementos de formulario comúnmente utilizados en HTML incluyen: área de texto (TEXTAREA), cuadro de lista (SELECT), cuadro de entrada de texto (tipo de ENTRADA = texto), cuadro de entrada de contraseña (tipo de ENTRADA = contraseña), cuadro de entrada de radio (tipo de ENTRADA = radio), marque la casilla de entrada (tipo de ENTRADA = casilla de verificación), etc. Los elementos comunes que no son de formulario incluyen: etiqueta de enlace (A), etiqueta DIV, etiqueta SPAN, etiqueta TABLE, etc. La razón fundamental por la que los elementos de formulario anulan los elementos de estilo radica en las reglas de prioridad de visualización predeterminadas de los elementos HTML. Por ejemplo: los elementos de marco siempre tienen prioridad sobre otros elementos HTML y, por lo tanto, siempre se muestran al frente. elementos de forma.
Todos estos elementos HTML se pueden dividir en dos categorías según sus requisitos de visualización, a saber, elementos con ventana y elementos sin ventana. Los elementos en ventana incluyen: elementos SELECT, elementos OBJECT, complementos y elementos IFRAME en IE 5.01 y versiones anteriores. Los elementos sin ventanas incluyen: la mayoría de los elementos HTML comunes, como enlaces y etiquetas TABLE, la mayoría de los elementos de formulario, excepto los elementos SELECT, y elementos IFRAME en NS6+/IE 5.5 y posteriores. Los problemas tratados en este artículo están relacionados principalmente con elementos HTML con ventana. El quid del problema es que el sistema operativo siempre muestra elementos con ventana delante de los elementos sin ventana de forma predeterminada.
2. Tipo de navegador y prioridad de visualización
Según el tipo de navegador, el orden de visualización de los elementos HTML también es diferente, que se resume a continuación:
⑴Netscape/Mozilla
En versiones anteriores a NS Browser 6.0, los elementos del formulario siempre tenían mayor prioridad que otros elementos HTML. Pero en el navegador NS 6+, el orden de visualización de los elementos IFRAME y todos los elementos del formulario está determinado por el valor del atributo z-index de CSS o por el orden en que aparecen en la página HTML, excepto SELECT. elemento.
⑵Internet Explorer
En el último navegador IE (6.0), el elemento IFRAME y todos los elementos del formulario determinan la prioridad de visualización en función del valor del atributo del índice z o el orden en que aparecen en la página HTML, excepto el elemento SELECT.
⑶ Ópera
En los navegadores Opera (7.10*) más recientes, todos los elementos del formulario, incluido SELECT, tienen prioridad para su visualización según el atributo z-index o el orden en que aparecen en la página HTML. Sin embargo, la última versión del navegador Opera no muestra IFRAME como un elemento sin ventanas. IFRAME se considera un elemento con ventanas y tiene prioridad sobre todos los elementos sin ventanas en el orden de visualización.
3. Atributo de índice z CSS
Sabemos que el atributo z-index de CSS se puede utilizar para controlar el orden de superposición de cualquier elemento HTML cuando se muestra. Cuando varios elementos HTML se superponen en el mismo espacio, el elemento con un valor de índice z mayor sobrescribirá el elemento con un valor de índice z más pequeño.
Pero el valor del atributo del índice z no es omnipotente. Como se mencionó anteriormente, los elementos con ventana siempre se muestran delante de los elementos sin ventana, y el valor del atributo del índice z solo juega un papel decisivo entre elementos del mismo tipo. En sentido figurado, los elementos con ventana y los elementos sin ventana son como dibujar en dos lienzos diferentes en la misma ventana del navegador. Los dos tipos de elementos son independientes y sus atributos de índice z solo son relativos a otros elementos en el mismo lienzo. patada en.
4. Remedio
En lo que respecta a los navegadores actuales, una solución más eficaz es: cuando un elemento sin ventana necesita cubrirse con un elemento de ventana, utilice un script para ocultar dinámicamente el elemento de ventana. Aquí tienes un ejemplo completo:
<html><cabeza>
<tipo de estilo=texto/css>
.menuBlock{posición:relativa;arriba:14px;ancho:165px;borde:2px negro sólido;}
#subMenús{posición:relativa;izquierda:15px;arriba:15px;ancho:171px;
padding-left:2px;padding-right:2px;border:2px negro sólido;
índice z:100;visibilidad:oculto;}
#lb_1{posición:absoluta;izquierda:10px;arriba:40px;
</estilo>
<tipo de script=texto/javascript>
var isActive = falso;
función mostrarMenú(){
isActive = verdadero;
//document.getElementById(lb_1).style.visibility=hidden;
document.getElementById(subMenus).style.visibility=visible;
}
función ocultarMenú(){
está activo = falso;
setTimeout('ocultar()',100);
}
función ocultar(){
si(!isActive){
document.getElementById(subMenus).style.visibility = oculto;
document.getElementById(lb_1).style.visibility=visible;
}
}
función setStyle(menuItem){
isActive = verdadero;
menuItem.style.backgroundColor = Gris;
menuItem.estilo.color = #FFFFFF
}
función setDefault(menuItem){
está activo = falso;
menuItem.style.backgroundColor =;
menuItem.estilo.color =
ocultarMenú();
}
</script></head><body>
<div id=estilo principal=posición:absoluta;ancho:200px;>
<div id=menuBlock class=menuBlock onmouseover=showMenu();
onmouseout=hideMenu();>Menú CSS</div>
<div id=submenús>
<div id=0 onmouseover=setStyle(esto)
onmouseout=setDefault(this) >Elemento de menú uno</div>
<!--Cuatro elementos de menú en total-->
</div><P>
<seleccione id=lb_1 nombre=lb_1>
<valor de opción=-1/>Seleccionar lista
<!--Tres opciones-->
</seleccionar>
</div>
</cuerpo></html>
La parte <ESTILO> de la página define tres estilos, que se utilizan para barras de menú, elementos de menú y listas de selección. La definición de estilo garantiza que las áreas de visualización de los menús y las listas de selección se superpongan. La sección <BODY> contiene definiciones para menús y listas de selección <SELECT>. Cuando el mouse pasa sobre la barra de menú, se ejecuta la función JavaScript showMenu para mostrar el menú y ocultar la lista de selección SELECT. Después de que el mouse sale, la función hideMnu oculta el menú y restaura la lista de selección. Las funciones restantes de JavaScript se utilizan principalmente para simular acciones del menú. Cuando el mouse pasa sobre un elemento del menú, el menú se muestra con alto brillo (función setStyle) y cuando el mouse sale del elemento del menú, se restaura al modo de visualización predeterminado. (función establecida por defecto). El efecto de ejecución de la página se muestra en la Figura 2. Comente la declaración document.getElementById(lb_1).style.visibility=hidden en la función showMenu para ver el efecto en la Figura 1.
<descripción>
<img src=http://www.chinahtml.com/cce/img/553/04601t02.jpg>
</descript>
En resumen, la causa fundamental de que los elementos de formulario anulen los elementos de estilo radica en las reglas de prioridad de visualización predeterminadas de los elementos HTML. Los remedios presentados en este artículo son realmente efectivos, pero si realmente no desea utilizar este método, debe considerar cambiar el diseño de la página para evitar la superposición del área de visualización de elementos de formulario y elementos de estilo.