"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Por que a `Posição: Sticky` e` Bottom: 0` oposta à descrição do MDN?

Por que a `Posição: Sticky` e` Bottom: 0` oposta à descrição do MDN?

Postado em 2025-04-30
Navegar:180

Why Does `position: sticky` with `bottom: 0` Behave Opposite to MDN\'s Description?

Comportamento oposto da posição: adesivo com inferior: 0

Ao especificar a posição: adesiva com o fundo: 0, ele se comporta de maneira diferente da definição fornecida pelo mdn. Ao contrário da descrição, onde os elementos são tratados inicialmente como relativamente posicionados até que excedam um limite e se tornem fixo, o oposto ocorre com o fundo: 0 especificado.

rodapé { Posição: pegajoso; Inferior: 0; }

footer {
  position: sticky;
  bottom: 0;
}

Quando rolar para baixo:

o rodapé inicia como fixo posicionado, depois se torna relativamente posicionado quando a parte inferior do rodapé atinge 0px da parte inferior da visualização. Quando a parte inferior do rodapé passa por 0px da parte inferior da viewport. excedido. "
  • isso significa que a posição inicial é determinada pela estrutura HTML e pela distância até o limite especificado. No caso do fundo: 0, o rodapé já está na parte inferior da viewport quando a página carrega. Assim, ele começa em um estado "fixo", pois o limite (0px da parte inferior) já foi excedido. Esse comportamento é oposto ao comportamento descrito na documentação do MDN devido à posição inicial determinada pela estrutura HTML e por proximidade com o limite especificado.
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3