Quiz 11 - Introdução

1. Qual o comportamento padrão de um elemento com `display: block`?

Ele fica na mesma linha que outros elementos

Ele ocupa toda a largura disponível e sempre começa em uma nova linha

Ele desaparece da tela

Ele fixa o elemento no topo da página *Explicação: Elementos em bloco (como `div` e `p`) funcionam como "tijolos" que ocupam toda a extensão do seu container.*

2. Em relação à propriedade `display: inline`, o que é VERDADE?

Permite definir `width` e `height` fixos

Ocupa apenas o espaço necessário para o conteúdo e não permite definir largura ou altura

Ele pula para uma nova linha automaticamente

É o comportamento padrão das tabelas *Explicação: Elementos em linha (como `span` ou `a`) fluem horizontalmente junto com o texto.*

3. Qual valor da propriedade `display` faz o elemento sumir da tela e não ocupar espaço algum?

`hidden`

`invisible`

`none`

`exit` *Explicação: Diferente de `visibility: hidden` (que deixa o espaço vazio), o `display: none` remove o elemento do layout completamente.*

4. Qual valor de `position` é o padrão de todos os elementos HTML?

`relative`

`static`

`absolute`

`fixed` *Explicação: O posicionamento estático segue o fluxo natural do documento.*

5. O que acontece quando definimos `position: relative` em um elemento e movemos com `top: 10px`?

O elemento flutua e sai do fluxo da página

O elemento se move 10px para baixo em relação à sua posição original, mas o espaço original dele continua ocupado

O elemento vai para o topo da tela do navegador

Ele desaparece *Explicação: Posicionamento relativo apenas "desvia" o elemento da sua posição natural sem afetar os vizinhos.*

6. Sobre o `position: absolute`, qual a condição para que o elemento se posicione corretamente?

Ele deve estar dentro de uma tag ``

Ele deve ter obrigatoriamente um `z-index` negativo

Ele se posiciona em relação ao primeiro pai que tenha um posicionamento diferente de `static`

Ele só funciona se o site tiver imagens *Explicação: O elemento absoluto "procura" um antecessor posicionado (geralmente com `relative`) para usar como referência.*

7. Qual `position` fixa um elemento na tela do navegador, impedindo que ele se mova durante a rolagem?

`sticky`

`absolute`

`fixed`

`static` *Explicação: `fixed` é ideal para menus fixos, alertas ou botões de suporte que devem estar sempre visíveis.*

8. Qual a principal utilidade do `position: sticky`?

Deixar o elemento invisível até ser clicado

Fazer o elemento se comportar como relativo até atingir uma posição de rolagem específica, onde ele fica fixo

Mudar a cor do elemento ao passar o mouse

Centralizar o elemento na tela *Explicação: É o efeito "grudento", muito usado para manter cabeçalhos visíveis enquanto o usuário lê o conteúdo.*

9. Para que serve a propriedade `z-index`?

Para mudar o tamanho da fonte

Para definir a velocidade de animações

Para controlar a ordem de empilhamento (qual elemento fica na frente dos outros)

Para definir a transparência da borda *Explicação: Em elementos sobrepostos, o `z-index` determina quem está em qual camada de profundidade.*

10. Qual a função das propriedades `top`, `bottom`, `left` e `right`?

Definir o tamanho das imagens

Definir a distância de deslocamento para elementos com posicionamento `relative`, `absolute`, `fixed` ou `sticky`

Mudar o alinhamento do texto

Criar gradientes de cores *Explicação: Elas são as coordenadas espaciais para mover elementos posicionados.*