Que características da propriedade position: sticky conhece?

position: sticky – é um híbrido entre position: relative e position: fixed.

• Comportamento padrão: O elemento comporta-se como com position: relative, permanecendo no fluxo normal do documento.
• Ao rolar: Quando o elemento atinge um deslocamento definido (por exemplo, top: 0) em relação ao seu contêiner de rolagem ou à área de visualização (viewport), ele "cola" e comporta-se como com position: fixed, permanecendo visível nesta posição ao continuar a rolar.
• Deslocamento: É definido pelas propriedades top, right, bottom, left. É necessário usar pelo menos uma dessas propriedades para que o sticky funcione corretamente.
• Contêiner de rolagem (scroll container/containing block): O elemento "cola" dentro dos limites do seu bloco de formatação pai (containing block), que geralmente corresponde ao antecessor mais próximo que tenha capacidade de rolagem ou um contexto de formatação definido. Se apenas o body/html rolar, o colar será em relação à área de visualização.
• Sobreposição: O elemento "colante" pode sobrepor o conteúdo abaixo dele, semelhante a um elemento com position: fixed.
• Z-index: O comportamento de sobreposição é influenciado pela propriedade z-index.
• Restrições:
  • Não funciona se o elemento pai tiver overflow: hidden, overflow: auto ou overflow: scroll, que cortam o conteúdo.
  • O elemento pode "descolar" se atingir a borda do seu contêiner de rolagem.
• Uso: Frequentemente usado para criar cabeçalhos "colantes" em tabelas, painéis de navegação ou elementos laterais que permanecem visíveis ao rolar o conteúdo principal.

/* Exemplo de uso */
.sticky-header {
  position: sticky;
  top: 0; /* Cola ao topo do viewport ou do contêiner */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Garante que o cabeçalho fique acima de outros conteúdos */
}