Programação · FGV · 2024 | Questão sqc-fg098218

Empilhamento de elementos com z-index em CSS

Gabarito: letra E. Para que a imagem seja exibida por trás do texto, é necessário atribuir a ela um valor de z-index negativo, como z-index: -1;, fazendo com que ela fique em um nível inferior na ordem de empilhamento (stacking context) e o texto, que por padrão tem z-index auto (equivalente a 0), seja desenhado por cima. As demais alternativas apresentam propriedades ou valores que não existem ou não produzem esse efeito.

O z-index é uma propriedade CSS que controla a ordem de empilhamento de elementos posicionados (com position diferente de static). Elementos com z-index maior aparecem na frente; com z-index menor, atrás. Quando um elemento tem z-index: -1, ele é colocado atrás do conteúdo normal da página, que tem z-index implícito de 0. Para que isso funcione, o elemento precisa estar posicionado (por exemplo, com position: relative, absolute ou fixed), caso contrário a propriedade z-index não tem efeito.

Na prática, se você tem um texto e uma imagem e quer que a imagem fique atrás do texto, você aplica position: relative (ou outro valor de posicionamento) e z-index: -1 à imagem. O texto, sem z-index explícito, fica no nível 0 e, portanto, é renderizado na frente. Essa é uma técnica comum para criar fundos decorativos ou camadas de profundidade em uma página.

A pegadinha desta questão está em reconhecer que z-index é a única propriedade que controla a ordem de empilhamento, e que valores negativos são válidos e colocam o elemento atrás do conteúdo padrão. As alternativas incorretas inventam propriedades (deep-align, display: block behind, visible: behind) ou usam propriedades que não têm relação com empilhamento (overflow: auto).

NÃO CAIA NESSA!

A banca tenta confundir o candidato com propriedades que não existem no CSS (deep-align, display: block behind, visible: behind) e com overflow: auto, que é uma propriedade real, mas controla a rolagem de conteúdo, não a ordem de empilhamento. O z-index é a única propriedade que define a profundidade, e valores negativos são perfeitamente válidos para colocar um elemento atrás de outro.

z-index (empilhamento): Requisito (Elemento posicionado (relative, absolute, fixed)); Valores (Maior → frente, Menor → atrás, Negativo (ex.: -1) → atrás do conteúdo padrão); Distratores (deep-align (não existe), display: block behind (inválido), visible: behind (não existe), overflow: auto (rolagem, não empilhamento))

Alternativa A — ❌ Incorreta

deep-align: 0; não é uma propriedade CSS válida. Não existe deep-align na especificação do CSS. A propriedade que controla o alinhamento vertical de elementos inline é vertical-align, mas ela não tem relação com empilhamento de camadas.

Alternativa B — ❌ Incorreta

display: block behind; é uma sintaxe inválida. A propriedade display aceita valores como block, inline, flex, grid, entre outros, mas não aceita block behind. Além disso, display controla o tipo de caixa do elemento, não sua posição na ordem de empilhamento.

Alternativa C — ❌ Incorreta

overflow: auto; é uma propriedade CSS válida, mas controla o comportamento de rolagem do conteúdo de um elemento quando ele excede suas dimensões. Ela não tem nenhum efeito sobre a ordem de empilhamento ou sobre a posição relativa entre imagem e texto. É um distrator clássico: uma propriedade real, mas que não resolve o problema proposto.

Alternativa D — ❌ Incorreta

visible: behind; não é uma propriedade CSS válida. A propriedade que controla a visibilidade de um elemento é visibility, que aceita valores como visible, hidden e collapse, mas não existe visible: behind. Além disso, visibility não controla a ordem de empilhamento.

Alternativa E — ✅ Correta ⟵ GABARITO

z-index: -1; é a propriedade correta. O z-index define a ordem de empilhamento de elementos posicionados. Um valor negativo coloca o elemento atrás do conteúdo normal da página, que tem z-index implícito de 0. Para que a imagem fique atrás do texto, ela deve ter z-index: -1 e estar posicionada (por exemplo, com position: relative). O texto, sem z-index explícito, fica no nível 0 e é renderizado na frente.

Gabarito: letra E