No processo de design de páginas HTML, frequentemente encontramos problemas causados por elementos de formulário que cobrem elementos de estilo. A Figura 1 é um exemplo típico. Não subestime esse problema aparentemente de “baixo nível”. Problemas semelhantes não são incomuns, mesmo em sites maiores. Este artigo explora a causa raiz deste problema e propõe uma solução - a razão pela qual digo uma solução em vez de uma solução permanente é porque os dois gigantes Microsoft e NetScape ainda não têm contramedidas.
1. Exibir prioridade dos elementos HTML
Os elementos de formulário comumente usados em HTML incluem: área de texto (TEXTAREA), caixa de listagem (SELECT), caixa de entrada de texto (tipo INPUT = texto), caixa de entrada de senha (tipo INPUT = senha), caixa de entrada de rádio (tipo INPUT = rádio), caixa de entrada de seleção (tipo INPUT = caixa de seleção), etc. Elementos não-formulários comuns incluem: tag link (A), tag DIV, tag SPAN, tag TABLE, etc. A razão fundamental pela qual os elementos do formulário substituem os elementos de estilo está nas regras de prioridade de exibição padrão dos elementos HTML. Por exemplo: os elementos do quadro sempre têm precedência sobre outros elementos HTML e, portanto, são sempre exibidos na frente. elementos do formulário.
Todos esses elementos HTML podem ser divididos em duas categorias de acordo com seus requisitos de exibição, ou seja, Elementos com Janela e Elementos sem Janela. Os elementos de janela incluem: elementos SELECT, elementos OBJECT, plug-ins e elementos IFRAME no IE 5.01 e versões anteriores. Os elementos sem janela incluem: a maioria dos elementos HTML comuns, como links e tags TABLE, a maioria dos elementos de formulário, exceto elementos SELECT, e elementos IFRAME no NS6+/IE 5.5 e posterior. Os problemas discutidos neste artigo estão principalmente relacionados aos elementos HTML com janela. O cerne do problema é que o sistema operacional sempre exibe elementos com janela na frente de elementos sem janela por padrão.
2. Tipo de navegador e prioridade de exibição
De acordo com o tipo de navegador, a ordem de exibição dos elementos HTML também é diferente, resumida a seguir:
⑴Netscape/Mozilla
Nas versões anteriores ao NS Browser 6.0, os elementos do formulário sempre tinham prioridade mais alta do que outros elementos HTML. Mas no navegador NS 6+, a ordem de exibição dos elementos IFRAME e de todos os elementos do formulário é determinada pelo valor do atributo z-index do CSS ou pela ordem em que aparecem na página HTML, exceto para o SELECT. elemento.
⑵Internet Explorer
No navegador IE mais recente (6.0), o elemento IFRAME e todos os elementos do formulário determinam a prioridade de exibição com base no valor do atributo z-index ou na ordem em que aparecem na página HTML, exceto o elemento SELECT.
⑶ Ópera
Nos navegadores Opera (7.10*) mais recentes, todos os elementos do formulário, incluindo SELECT, são priorizados para exibição com base no atributo z-index ou na ordem em que aparecem na página HTML. No entanto, o navegador Opera mais recente não exibe IFRAME como um elemento sem janela. IFRAME é considerado um elemento com janela e tem precedência sobre todos os elementos sem janela na ordem de exibição.
3. Atributo CSS z-index
Sabemos que o atributo z-index do CSS pode ser usado para controlar a ordem de sobreposição de qualquer elemento HTML quando ele é exibido. Quando vários elementos HTML se sobrepõem no mesmo espaço, o elemento com um valor de índice z maior substituirá o elemento com um valor de índice z menor.
Mas o valor do atributo z-index não é onipotente. Como mencionado anteriormente, os elementos com janela são sempre exibidos na frente dos elementos sem janela, e o valor do atributo z-index desempenha apenas um papel decisivo entre elementos do mesmo tipo. Em termos figurados, elementos com janela e elementos sem janela são como desenhar em duas telas diferentes na mesma janela do navegador. Os dois tipos de elementos são independentes e seus atributos de índice z são relativos apenas a outros elementos na mesma tela. chutar.
4. Remédio
No que diz respeito aos navegadores atuais, uma solução mais eficaz é: quando um elemento sem janela precisar ser coberto por um elemento de janela, use um script para ocultar dinamicamente o elemento de janela. Aqui está um exemplo completo:
<html><head>
<tipo de estilo=texto/css>
.menuBlock{posição:relativa;topo:14px;largura:165px;borda:2px preto sólido;}
#subMenus{posição:relativa;esquerda:15px;topo:15px;largura:171px;
preenchimento à esquerda: 2px; preenchimento à direita: 2px; borda: 2px preto sólido;
índice z:100;visibilidade:oculto;}
#lb_1{posição:absoluta;esquerda:10px;topo:40px }
</estilo>
<tipo de script=texto/javascript>
var isActive = falso;
função mostrarMenu(){
isActive = verdadeiro;
//document.getElementById(lb_1).style.visibility=hidden;
document.getElementById(subMenus).style.visibility=visível;
}
função ocultarMenu(){
estáAtivo = falso;
setTimeout('ocultar()',100);
}
função ocultar(){
if(!isActive){
document.getElementById(subMenus).style.visibility = oculto;
document.getElementById(lb_1).style.visibility=visible;
}
}
função setStyle(menuItem){
isActive = verdadeiro;
menuItem.style.backgroundColor = Cinza;
menuItem.style.color = #FFFFFF
}
function setDefault(menuItem){
estáAtivo = falso;
menuItem.style.backgroundColor = ;
menuItem.style.color =
ocultarMenu();
}
</script></head><body>
<div id=estilo principal=posição:absoluto;largura:200px;>
<div id=menuBlock class=menuBlock onmouseover=showMenu();
onmouseout=hideMenu();>Menu CSS</div>
<div id=subMenus>
<div id=0 onmouseover=setStyle(este)
onmouseout=setDefault(this) >Item de menu um</div>
<!--Quatro itens de menu no total-->
</div><P>
<selecione id=lb_1 nome=lb_1>
<option value=-1/>Selecionar lista
<!--Três opções-->
</selecionar>
</div>
</body></html>
A parte <STYLE> da página define três estilos, que são usados para barras de menu, itens de menu e listas de seleção, respectivamente. A definição de estilo garante que as áreas de exibição dos menus e listas de seleção se sobreponham. A seção <BODY> contém definições para menus e listas de seleção <SELECT>. Quando o mouse passa sobre a barra de menu, a função JavaScript showMenu é executada para exibir o menu e ocultar a lista de seleção SELECT. Depois que o mouse sai, a função hideMnu oculta o menu e restaura a lista de seleção. As demais funções JavaScript são usadas principalmente para simular ações de menu. Quando o mouse passa sobre um item de menu, o menu é exibido com alto brilho (função setStyle) e quando o mouse sai do item de menu, ele é restaurado ao modo de exibição padrão. (função setDefault). O efeito de execução da página é mostrado na Figura 2. Comente a instrução document.getElementById(lb_1).style.visibility=hidden na função showMenu para ver o efeito na Figura 1.
<descrito>
<img src=http://www.chinahtml.com/cce/img/553/04601t02.jpg>
</descript>
Resumindo, a causa raiz dos elementos de formulário que substituem os elementos de estilo está nas regras de prioridade de exibição padrão dos elementos HTML. As soluções apresentadas neste artigo são realmente eficazes, mas se você realmente não quiser usar esse método, deverá considerar alterar o layout da página para evitar a sobreposição da área de exibição dos elementos do formulário e dos elementos de estilo.