Quais propriedades CSS criam um contexto de empilhamento?

Estou estudando sobre o empilhamento de contextos e fazendo alguns testes com as propriedades que criam um contexto de empilhamento.

Fiz vários testes e descobri que, além do z-index , é claro, as seguintes propriedades também criam um contexto de empilhamento:

  • transform diferente de none ;
  • opacity diferente de 1 ;
  • E perspective .

Existem outras propriedades que aplicam um contexto de empilhamento?

Um ou mais dos seguintes cenários farão com que um elemento estabeleça seu próprio contexto de empilhamento 1 para seus descendentes:

  • O elemento raiz sempre mantém um contexto de empilhamento de raiz. É por isso que você pode começar a organizar elementos sem ter que posicionar o elemento raiz primeiro. Qualquer elemento que ainda não participa de um contexto de empilhamento local (gerado por qualquer um dos outros cenários abaixo) participará do contexto de empilhamento raiz.

  • Definir z-index para qualquer coisa diferente de auto em um elemento que está posicionado (ou seja, um elemento com position que não é static ).

    • Observe que esse comportamento está programado para ser alterado para elementos com position: fixed forma que sempre estabeleçam contextos de empilhamento, independentemente de seu valor de z-index . Alguns navegadores começaram a adotar esse comportamento, no entanto, a alteração ainda não foi refletida no CSS2.1 ou no novo CSS Positioned Layout Module , portanto, talvez não seja prudente confiar nesse comportamento por enquanto.

      Essa mudança de comportamento é explorada em outra resposta minha , que por sua vez se vincula a este artigo e a este conjunto de atas de teleconferência do CSSWG .

    • Outra exceção a isso é com um item flexível . Definir o z-index em um item flexível sempre fará com que ele estabeleça um contexto de empilhamento, mesmo que não esteja posicionado.

  • Definir a opacity para qualquer coisa menor que 1 .

  • Transformando o elemento:

    • Configurando a transform para algo diferente de none .

    • Configurando o transform-style para preserve-3d .

    • Definindo perspective para algo diferente de none .

  • Criando uma região CSS : configurando flow-from para qualquer coisa diferente de none em um elemento cujo content é diferente do normal .

  • Na mídia paginada , cada checkbox de margem de página estabelece seu próprio contexto de empilhamento.

  • Nos efeitos de filtro , defina o filter para algo diferente de none .

  • Na composição e na mesclagem , ajuste o isolation para isolate .

  • Em mudará , a configuração will-change para uma propriedade cujo valor não inicial criaria um contexto de empilhamento.

Observe que um contexto de formatação de bloco não é o mesmo que um contexto de empilhamento; na verdade, são dois conceitos completamente independentes (embora não mutuamente exclusivos).


1 Isso não inclui contextos de pseudo-empilhamento , um termo informal que simplesmente se refere a coisas que se comportam como contextos de empilhamento independentes em relação ao posicionamento, mas que na verdade participam de seus contextos de empilhamento pai.