INFO: Como o atributo Z-index funciona para elementos HTML

Há muitas maneiras de classificar os elementos em uma página da Web. Para fins deste artigo e o atributo z-index , pode dividi-los em duas categorias: janelas e sem janelas.

Elementos de janela

• <OBJECT>elementos de marca</OBJECT>
• Controles de ActiveX
• Plug-ins
• Dynamic HTML (DHTML) Scriptlets
• Selecionar elementos
• IFRAMEs no Internet Explorer 5.01 e anteriores

Observação Controles de ActiveX são implementados como sem janelas e realmente se encaixam na categoria sem janelas. Por padrão, controles de Visual Basic de Microsoft e Microsoft Foundation Class (MFC) estão em janelas, mas controles Active Template Library (ATL) são sem janelas.

Elementos sem janelas

• Controles sem janelas de ActiveX
• IFRAMEs no Internet Explorer 5.5 e posterior
• A maioria dos elementos DHTML, como hiperlinks ou tabelas

Todos os elementos de janelas pintar próprios de todos os elementos sem janelas, apesar dos desejos do contêiner. No entanto, elementos em janelas siga o atributo z-index com relação ao outro, assim como os elementos sem janelas siga o atributo z-index com relação ao outro.

Todos os elementos sem janelas são processados no mesmo plano MSHTML e elementos de janela desenhar em um avião MSHTML separado. Você pode usar o índice z para manipular elementos no mesmo plano, mas não para misturar e combinar com elementos em planos diferentes. Você pode reorganizar a z-indexação dos elementos em cada plano, mas sempre desenha o plano de janelas na parte superior do plano sem janelas.

Como funciona o índice z no Internet Explorer 5

No Internet Explorer 5, IFRAMEs são controles em janelas em siga o atributo z-index com relação a outros controles em janelas, como Selecionar elementos. Se o índice z de IFRAME for maior que Selecionar elementos, o IFRAME desenha na parte superior de Selecionar elementos e vice-versa. Se o índice z é a mesma, a ordem dos elementos na página prevalece; Portanto, o último elemento desenha na parte superior do elemento anterior.

O exemplo de código a seguir ilustra isso:O índice z de IFRAME é definido como um valor constante de 5. Quando você inserir um valor maior que o resto dos elementos, o elemento DIV sempre desenha na parte inferior porque é sem janelas e outros elementos desenhar na parte superior do elemento DIV . Quando você alterar o índice z de elemento SELECT para um valor maior que 5, Selecionar elementos desenha na parte superior do IFRAME. Quando você alterar o índice z de elemento SELECT para um valor que seja menor que 5, ele desenha na parte inferior do IFRAME.

Quando você definir o índice z de elemento SELECT para 5, o IFRAME desenha na parte superior do elemento Selecionar porque o IFRAME é o último elemento e, portanto, ela tem precedência sobre Selecionar. Se o elemento SELECT seguido o IFRAME, o elemento desenha na parte superior do IFRAME quando os índices z são iguais.

Como funciona o índice z no Internet Explorer 5.5

Indexação z é levado para um nível completamente novo no Internet Explorer 5.5 no quais IFRAMEs não são mais elementos em janelas. Para obter mais informações, consulte o tópico "Elementos de IFRAME sem janelas" no seguinte artigo da Microsoft Developer Network (MSDN):Isso deixa o elemento Selecionar como o único elemento que está em janelas. Se você usar o código anterior para executar a página no Internet Explorer 5.5, quando você definir o índice z de elemento SELECT para um valor maior que 5, ele desenha na parte superior do IFRAME. Quando você definir o índice z de elemento SELECT para um valor que seja menor que 5, o IFRAME sobrepõe, mesmo que eles são os dois elementos sem janelas. É isso que torna o IFRAME exclusivo: segue z-index com relação a elementos sem janelas e suporta z-index com relação a elementos de janela como elemento SELECT neste caso.

Quando você definir o índice z do elemento DIV para um valor maior que o IFRAME (como 6), DIV abrange o IFRAME. Isso oferece suporte a declaração acima IFRAMEs estão sem janelas e que eles seguem a ordem z em relação a outros elementos sem janelas. Quando você definir o índice z para um valor menor ou igual a IFRAME (como 5), ele ainda desenha na parte superior da DIV porque a ordem dos elementos tem precedência. Quando você definir o índice z de DIV ao 6 e deixe o índice z de elemento SELECT e IFRAME 5, o elemento Selecionar sempre desenha na parte superior da DIV porque está em janelas.

No entanto, IFRAME tenta desenhar na parte superior de Selecionar porque é último na ordem. Para evitar isso, o valor índice z do elemento Selecionar deve ser maior do que o IFRAME ou elemento Selecionar deve ser o último da lista para garantir que o elemento sempre desenha na parte superior do IFRAME, quando os índices z são iguais. Assim, a indexação z semelhante conteúdo pode ser difícil. Para contornar esse problema, use os seguintes métodos:

• Use o atributo de estilo de folhas de estilo em cascata (CSS) para ocultar e mostrar elementos quando necessário.
• Use DHTML Scriptlets. Embora comportamentos são geralmente preferidos, essa é uma instância onde scriptlets são preferenciais.
• No Internet Explorer 5.5, você pode usar o objeto pop-up , que permite exibir conteúdo rico na parte superior de qualquer coisa. Isso é muito útil para menus e funcionalidade de dica de ferramenta. Para obter mais informações, consulte o artigo "popup objeto" no seguinte site da MSDN:
  . aspx http://msdn.microsoft.com/en-us/library/ms535882 (v=vs.85) (http://msdn.microsoft.com/en-us/library/ms535882(v=vs.85).aspx)
• Use controles sem janelas de ActiveX em vez de objetos em janelas. Infelizmente, todos os controles ActiveX não têm implementações sem janelas.

Para obter mais informações sobre como desenvolver soluções baseadas na Web para o Microsoft Internet Explorer, visite os seguintes sites da Microsoft: