Problemas de camadas do índice Z do IE7

163

Eu isolei um pequeno caso de teste do z-indexbug do IE7 , mas não sei como corrigi-lo. Eu tenho jogado o z-indexdia todo.

O que há de errado z-indexno IE7?

Teste CSS:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

Teste de HTML:

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>

css internet-explorer-7 z-index

— rezna
fonte

Se você está procurando uma solução

— alternativa

268

O índice Z não é uma medida absoluta. É possível que um elemento com z-index: 1000 esteja atrás de um elemento com z-index: 1 - desde que os respectivos elementos pertençam a diferentes contextos de empilhamento .

Ao especificar o z-index, você o especifica em relação a outros elementos no mesmo contexto de empilhamento e, embora o parágrafo da especificação CSS no Z-index indique que um novo contexto de empilhamento é criado apenas para conteúdo posicionado com um índice z diferente de auto (ou seja, o documento inteiro deve ser um único contexto de empilhamento), você fez construir uma extensão posicionado: Infelizmente IE7 interpreta conteúdo posicionado sem z-index isso como um novo contexto de empilhamento.

Em resumo, tente adicionar este CSS:

#envelope-1 {position:relative; z-index:1;}

ou redesenhe o documento para que seus períodos não tenham posição: relativa por mais tempo:

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

Consulte http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ para obter um exemplo semelhante desse bug. O motivo pelo qual um elemento pai (envelope-1 no seu exemplo) funciona com um índice z mais alto é porque todos os filhos do envelope-1 (incluindo o menu) se sobrepõem a todos os irmãos do envelope-1 (especificamente, envelope-2).

Embora o z-index permita definir explicitamente como as coisas se sobrepõem, mesmo sem o z-index, a ordem das camadas está bem definida . Finalmente, o IE6 possui um bug adicional que faz com que caixas de seleção e iframes flutuem sobre tudo o resto.

— Eamon Nerbonne
fonte

4

finalmente resolvi :) - a posição relativa é realmente irritante, então, de alguma forma, adotei sua ideia sem os elementos 'envelope' - parece resolver o problema e também trabalhar - só preciso redesenhar um pouco o código da caixa de sugestões - thx a monte

— rezna

6

Há três coisas diferentes que afetam a forma como os elementos se sobrepõem: contextos de empilhamento, ordem de origem e ordem de pintura. Os problemas mais óbvios surgem ao lidar com contextos de empilhamento - saber que os outros dois o ajudarão a descobrir as dicas mais esotéricas. Fonte: CSS-Discuss Wiki.

— Rjb

2

adicionar o índice z para o elemento principal é uma solução excelente

— Danyun Liu

2

Eu te amo. Posição adicionada: relativa e z-index: 500 ao meu pai e foi corrigido!

— Aymeric Gaurat-Apelli

2

Eu fiz um violino desse problema com comentários que demonstram a solução. jsfiddle.net/fNcGu/3

— Christopher Johnson

15

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});

— nixis
fonte

Depois de ler a solução "correta" acima, tentei formular uma solução para o meu problema consideravelmente mais complexo do que o trivial da questão. então eu joguei essa resposta e funcionou como um encanto. se a solução acima é a correta, certamente é a mais fácil. obrigado!

— Landon

11

No IE, os elementos posicionados geram um novo contexto de empilhamento, começando com um valor de índice z igual a 0. Portanto, o índice z não funciona corretamente.

Tente atribuir ao elemento pai um valor mais alto do índice z (pode ser ainda mais alto que o próprio valor do índice z da criança) para corrigir o erro.

— ed1nh0
fonte

1

Obrigado. Essa solução funcionou para mim, fornecendo um índice z do contêiner pai, não necessariamente maior que o z-index da criança.

— neelmeg

4

Eu encontrei esse problema, mas em um projeto grande em que as alterações em HTML precisavam ser solicitadas e se tornaram um problema inteiro, estava procurando uma solução css pura.

Ao colocar position:relative; z-index:-1no conteúdo principal do meu corpo, meu cabeçalho suspenso subitamente aparece acima do conteúdo do corpo no ie7 (ele já era exibido sem problemas em todos os outros navegadores e no ie8 +)

O problema era que isso desabilitava todas as ações de foco e clique em todo o conteúdo do elemento com o z-index:-1comando I, então, fui para o elemento pai de toda a página e forneci umposition:relative; z-index:1

O que corrigiu o problema e manteve a funcionalidade correta de camadas.

Parece um pouco hacky, mas funcionou conforme necessário.

— lukeroxout
fonte

3

Eu descobri que tinha que colocar uma designação especial de índice z em div em uma folha de estilo específica ie7:

div {z-index: 10; }

Para o índice z de divs não relacionadas, como uma nav, para mostrar acima do controle deslizante. Eu não poderia simplesmente adicionar um índice z ao div deslizante.

— Soluções eBar
fonte

Descobri que isso além de html {z-index:1; position:relative;}permitir que o menu repassasse a imagem do carrossel no IE.

— bassplayer7

2

Se a indexação z mais alta mencionada anteriormente nos nós pais não atender às suas necessidades, você poderá criar uma solução alternativa e direcioná-la para navegadores problemáticos por comentários condicionais do IE ou usando a detecção de recurso (mais idealista) fornecida pelo Modernizr.

Teste rápido (e obviamente funcionando) para o Modernizr:

Modernizr.addTest('compliantzindex', function(){
    var test  = document.createElement('div'),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    root.appendChild(test);
    test.style.position = 'relative';
    var ret = (test.style.zIndex !== 0);
    root.removeChild(test);

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});

— esferóide
fonte

Muito agradável! A detecção de recursos é definitivamente o caminho a percorrer.

— Jason

1

Parece que não é um bug, ou seja, apenas para uma compreensão diferente do padrão css. Se o contêiner externo não for especificado, o índice z, mas o elemento interno especificou um índice z mais alto. Portanto, o irmão do contêiner pode sobrepor o elemento de alto índice z. Mesmo assim, isso ocorre apenas no IE7, mas o IE6, IE8 e Firefox estão ok.

— c2j
fonte

0

No IE6 em geral, certos elementos da interface do usuário são implementados com controles nativos. Esses controles são renderizados em uma fase completamente separada (janela?) E sempre aparecem acima de qualquer outro controle, independentemente do z-index. Caixas de seleção são outro controle tão problemático.

A única maneira de contornar esse problema é construir o conteúdo que o IE renderiza como uma "janela" separada - ou seja, você pode colocar uma caixa de seleção sobre uma caixa de texto ou, mais útil, um iframe.

Em resumo, você precisará colocar "em movimento", como itens de menu em um iframe, para permitir que o IE coloque esses controles de interface do usuário acima.

Isso deveria ter sido corrigido no IE7 (consulte http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ), mas talvez você esteja executando algum tipo de modo de compatibilidade?

— Eamon Nerbonne
fonte

Eu sei sobre o bug do IE6 z-index - e isso foi corrigido - mas há outro problema com elementos / entradas de posição relativamente / absolutamente absolutos no IE7 (corrigido no IE8) - encontrei algumas soluções (jogando com z-indeces), mas nenhum deles trabalhou - é por isso que estou perguntando lá ... Enfim, thx pela resposta.

— rezna

0

Esse bug parece ser um problema separado do bug do IE padrão de contexto de empilhamento separado. Eu tive um problema semelhante com várias entradas empilhadas (essencialmente uma tabela com um preenchimento automático em cada linha). A única solução que encontrei foi fornecer a cada célula um valor decrescente do índice z.

— Jeremy Kauffman
fonte

0

Se você deseja criar um menu suspenso e ter um problema com o índice z, pode resolvê-lo criando índices z com o mesmo valor (índice z: 999; por exemplo). Basta colocar o índice z nos divs pai e filho e isso resolverá o problema. Eu resolvo o problema com isso. Se eu colocar índices z diferentes, claro, ele mostrará minha div filho sobre a div pai, mas, quando eu quiser mover o mouse da guia menu para a submenu div (lista suspensa), ela desaparecerá ... eu coloquei z-indexes do mesmo valor e resolvo o problema ..

— Marko
fonte

0

Eu o resolvi usando as ferramentas de desenvolvedor do IE7 (é uma barra de ferramentas) e adicionando um índice z negativo ao contêiner da div que estará abaixo da outra div.

— Lucas
fonte