Propriedade Isolation
Última atualização: 2026-09-13
isolation Propriedade Isolation
A propriedade isolation controla se um elemento cria um novo contexto de empilhamento. Quando definida como isolate, o elemento forma um ambiente de mesclagem independente, de modo que o mix-blend-mode dos filhos se mistura apenas com o conteúdo dentro do elemento, nunca vazando para elementos externos. É uma propriedade-chave para controlar com precisão o escopo dos modos de mesclagem.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
isolation: auto | isolate;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | isolate | Palavra-chave | Se deve criar um novo contexto de empilhamento |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| isolation | ✓ v43 | ✓ v12 | ✓ v36 | ✓ v9 | ✓ v30 |
| Suportado em todos os principais navegadores | |||||
Dica： O uso mais comum de isolate é em conjunto com mix-blend-mode, evitando que a mesclagem vaze para elementos que você não quer afetar.
❓ Perguntas Frequentes
QQuais propriedades de CSS criam um contexto de empilhamento no navegador?
AComuns: position com um z-index diferente de auto, opacity abaixo de 1, um transform diferente de none, um filter diferente de none, um mix-blend-mode diferente de normal e will-change. O isolation: isolate cria um contexto de empilhamento deliberadamente, mantendo a mesclagem e o empilhamento isolados dentro de si.
QQual é a diferença entre isolation: auto e isolation: isolate?
AO auto não cria um contexto de empilhamento por conta própria: o elemento se junta ao ambiente de empilhamento do pai, então o mix-blend-mode dos filhos pode ultrapassá-lo e misturar-se com conteúdo mais externo. O isolate força um novo contexto de empilhamento, limitando o escopo da mesclagem ao elemento: os filhos se misturam apenas com conteúdo interno e nunca vazam para fora. Use isolate quando precisar de controle preciso sobre a fronteira da mesclagem.
QAlém dos modos de mesclagem, o isolation: isolate tem outros usos?
AEm qualquer lugar onde relações de empilhamento precisem ser isoladas: evitar que os modos de mesclagem dos filhos afetem elementos externos, limitar o escopo das comparações de z-index, impedir que o posicionamento e a camada internos interfiram no exterior e combinar com contain: paint para otimizar a renderização. Em essência, isolate oferece uma forma limpa de criar um contexto de empilhamento sem depender de z-index ou opacity.
QQual é a diferença entre a propriedade isolation e o z-index?
AO z-index só pode ser definido em elementos posicionados e ajusta a ordem de empilhamento — um valor maior fica mais acima. O isolation: isolate não muda a ordem de cima para baixo dos elementos; ele cria uma fronteira de isolamento que separa o empilhamento interno do externo. Ambos envolvem contextos de empilhamento, mas o z-index decide quem está no topo, enquanto o isolation decide onde está a fronteira.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
